title: Can't able to clear the input value to empty string
body: <p><strong>I have made a table with a search bar functionality, it filter the data when press the search button and reset the filter function and show unfilter data when click the clear button but it's not clearing the current input value from the display. however it clear the filetr function and show  unfilter data. I tired setting state to empty string but still not able to clear the input value, I'm new in react need assistance to understand the issue</strong></p>
  <p><strong>1. App.js having search bar and all the state and function</strong></p>
  <pre><code>    function App() {
  
    const [searchTerm, setSearchTerm] = useState(&quot;&quot;);
    const classes = useStyles();
    const [buttonSearch, setButtonSearch] = useState(&quot;&quot;);
    const getSearchTerm = (event) =&gt; {
  
      let searchWord = event.target.value;
  
      setSearchTerm(searchWord);
  
      console.log(searchWord);
  
  
    }
  
    const doSearch = () =&gt; {
  
      console.log('this is from the doSearch func', searchTerm)
      setButtonSearch(searchTerm);
    }
  
    const clearSearch = () =&gt; {
      console.log('im working')
      setSearchTerm(&quot;&quot;);
      setButtonSearch(&quot;&quot;);
  
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;wrapper&quot;&gt;
          &lt;div className=&quot;container-table&quot;&gt;
            &lt;div className=&quot;head&quot;&gt;
              &lt;h5 className='management'&gt;MANAGEMENT&lt;/h5&gt;
              &lt;div className=&quot;head-middle&quot;&gt;
                &lt;h2&gt;Clients&lt;/h2&gt;
                &lt;div className=&quot;button-collection&quot;&gt;
                  &lt;Button style={{ backgroundColor: '#5900B4', color: '#FFFFFF', fontSize: '15px', fontWeight: '900', width: '206px', height: '42px' }}
                    variant=&quot;contained&quot;
                    className='add-collection-btn'
                    startIcon={&lt;AddIcon /&gt;}
                  &gt;
                    New Collection
                  &lt;/Button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;head-bottom&quot;&gt;
                &lt;div className=&quot;head-button&quot;&gt;
  
                  &lt;div className=&quot;search&quot;&gt;
                    &lt;div className={classes.search}&gt;
                      &lt;div className={classes.searchIcon}&gt;
                        &lt;SearchIcon /&gt;
                      &lt;/div&gt;
                      &lt;InputBase
                        placeholder=&quot;Search...&quot;
                        classes={{
                          root: classes.inputRoot,
                          input: classes.inputInput,
                        }}
  
                        onChange={getSearchTerm}
  
                      /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;Button onClick={doSearch}
                    style={{ backgroundColor: 'white', color: 'black', width: '100px', height: '40px', marginLeft: '20px', marginRight: '20px' }} variant=&quot;contained&quot;&gt;
                    Search
                  &lt;/Button&gt;
                  &lt;Button onClick={clearSearch}
                    style={{ backgroundColor: 'white', color: 'black', width: '100px', height: '40px' }} variant=&quot;contained&quot;&gt;
                    Clear
                  &lt;/Button&gt;
                &lt;/div&gt;
  
                &lt;Button
                  style={{ backgroundColor: 'transparent', color: '#5900B4', width: '206px', height: '42px', borderColor: '#5900B4', fontSize: '15px', fontWeight: '900' }}
                  variant=&quot;outlined&quot; color=&quot;primary&quot;
                  startIcon={&lt;FilterListIcon /&gt;}
                &gt;
                  SHOW FILTER
                &lt;/Button&gt;
              &lt;/div&gt;
              &lt;div className=&quot;table&quot;&gt;
                &lt;EnhancedTable
                  searchTerm={buttonSearch}
  
                /&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>2. table.js having filter and map function</strong></p>
  <pre><code>export default function EnhancedTable(props) {
  
  console.log(&quot;these r props for table component&quot;, props);
  
  const { searchTerm } = props;
  
  
  console.log(&quot;table searchTerm value&quot;, searchTerm)
  
  const classes = useStyles();
  const [order, setOrder] = React.useState('asc');
  const [orderBy, setOrderBy] = React.useState('calories');
  const [selected, setSelected] = React.useState([]);
  const [page, setPage] = React.useState(0);
  const [dense, setDense] = React.useState(false);
  const [rowsPerPage, setRowsPerPage] = React.useState(5);
  
  
  const isSelected = (name) =&gt; selected.indexOf(name) !== -1;
  
  const [data, setData] = useState([]);
  
  const getData = async () =&gt; {
      try {
          const data = await axios.get(&quot;something&quot;);
          console.log('This is data from axios', data.data);
          setData(data.data);
      } catch (e) {
          console.log(&quot;this is error for fetching data&quot;, e)
      }
  };
  
  
  useEffect(() =&gt; {
      getData();
  }, [])
  
  const filtered = useMemo(() =&gt; {
      if (!searchTerm) {
          return data;
      }
      const term = searchTerm.toLowerCase()
  
      return data.filter(({ clientName, clientEmail }) =&gt; clientName.toLowerCase().includes(term)
          || clientEmail.toLowerCase().includes(term)
      )
  
  }, [data, searchTerm])
  
  return (
      &lt;div className={classes.root}&gt;
  
          &lt;Paper className={classes.paper}&gt;
              &lt;EnhancedTableToolbar numSelected={selected.length} /&gt;
              &lt;TableContainer&gt;
                  &lt;Table
                      className={classes.table}
                      aria-labelledby=&quot;tableTitle&quot;
                      size={dense ? 'small' : 'medium'}
                      aria-label=&quot;enhanced table&quot;
                  &gt;
                      &lt;EnhancedTableHead
                          classes={classes}
                          numSelected={selected.length}
                          order={order}
                          orderBy={orderBy}
                      /&gt;
                      &lt;TableBody&gt;
                          {filtered
                              .map((item, index) =&gt; {
                                  return (
  
                                      &lt;TableRow
                                          hover
                                          role=&quot;checkbox&quot;
                                          tabIndex={-1}
                                      &gt;
                                          &lt;TableCell padding=&quot;checkbox&quot;&gt;
                                              &lt;Checkbox
                                              /&gt;
                                          &lt;/TableCell&gt;
                                          &lt;TableCell component=&quot;th&quot; scope=&quot;row&quot; padding=&quot;none&quot;&gt;{item.clientName}&lt;/TableCell&gt;
                                          &lt;TableCell align=&quot;right&quot;&gt;{item.clientEmail}&lt;/TableCell&gt;
                                          &lt;TableCell align=&quot;right&quot;&gt;{item.clientWorkPhone}&lt;/TableCell&gt;
                                          &lt;TableCell align=&quot;right&quot;&gt;{item.clientIndustry}&lt;/TableCell&gt;
                                          &lt;TableCell align=&quot;right&quot;&gt;{item.tenantId}&lt;/TableCell&gt;
                                          &lt;TableCell align=&quot;right&quot;&gt;{item.clientWebsite}&lt;/TableCell&gt;
                                          &lt;TableCell align=&quot;right&quot;&gt;
                                              &lt;Button style={{ backgroundColor: 'transparent', color: '#5900B4' }}
                                                  variant=&quot;outlined&quot; color=&quot;primary&quot; href=&quot;#outlined-buttons&quot; &gt;
                                                  {&lt;CreateIcon /&gt;}
                                              &lt;/Button&gt;
                                          &lt;/TableCell&gt;
                                      &lt;/TableRow&gt;
                                  )
                              })}
  
                      &lt;/TableBody&gt;
                  &lt;/Table&gt;
              &lt;/TableContainer&gt;
  
          &lt;/Paper&gt;
  
      &lt;/div&gt;
  );
  </code></pre>
  <p>}</p>