Search functionality no longer working after converting from React class to function component

I have converted a React class component to a function component with help from this question.

Everything works apart from this button:

{/* 
            Show only if user has typed in search.
            To reset the input field, we pass an 
            empty value to the filterUpdate method
          */}
{hasSearch && <button onClick={filterUpdate}>Clear Search</button>}

When I click this I get [object Object] in the search box. I also tried:

{hasSearch && <button onClick={filterUpdate("")}>Clear Search</button>}

but this stops the search functionality working. This is the old (Class component) code (which is working).

 {hasSearch && (
            <button onClick={this.filterUpdate.bind(this, "")}>
              Clear Search
            </button>
          )}

All of the code is in the other question. This provides context though.

 // update filterText in state when user types
  const filterUpdate = (value) => {
    setfilterText(value);
  };


/* ###################### */
/* ##### Search bar ##### */
/* ###################### */

// need a component class here
// since we are using `refs`
class Search extends Component {
  render() {
    const { filterVal, filterUpdate } = this.props;
    return (
      <form>
        <input
          type="text"
          ref="filterInput"
          placeholder="Type to filter.."
          // binding the input value to state
          value={filterVal}
          onChange={() => {
            filterUpdate(this.refs.filterInput.value);
          }}
        />
      </form>
    );
  }
}