生成合成事件的搜索栏

Question

我有一个应该采用输入值的搜索栏组件，但是我将 useState 用于我的 getter 和 setter，我有点困惑，因为它报告了一个错误 

下面是我的组件，你能发现错误吗？

const SuppliersNavBar = (props) => {

const { classes } = props;

const [search, setSearch] = useState();

const updateSearch = (event) => {

setSearch({ search: event.target.value });

console.log(event);

};

return (

<Fragment><Fab className={classes.addCircle} style={{ float: 'right', 

marginRight: 10, marginBottom: 10, backgroundColor: '#3B70BC', color: 

'white' }} onClick={() => { this.props.history.push('/'); }} 

id="addCircle" ><Add /></Fab>

  <div className={classes.root}>

    <AppBar position="static">

      <Toolbar>

        <Grid container direction="row"

          justify="flex-start"

          alignItems="center">

          <Grid item xs={12} sm={6} md={3}>

            <div className={classes.grow} />

            <div className={classes.search} aria-label="search bar">

              <div className={classes.searchIcon}>

                <Search id="searchIcon" />

              </div>

              <InputBase

                aria-label="search bar"

                value={search}

                onChange={updateSearch.bind(this)}

                placeholder="Search"

                classes={{

                  root: classes.inputRoot,

                  input: classes.inputInput,

                }}

              />

            </div>

          </Grid>

        </Grid>

      </Toolbar>

    </AppBar>

  </div>

</Fragment>

);

};