title: How to clear data of AutoComplete Box using OnClick?
body: <p>I have used material UI AutoCompleteBox here it's Link:<a href="https://material-ui.com/components/autocomplete/" rel="nofollow noreferrer">https://material-ui.com/components/autocomplete/</a></p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;Autocomplete
    open={showUniSuggs}
    onOpen={this.props.getUniversityOptions}
    onChange={(event, value) =&gt;
      this.props.handleUniversityChange(value)
    }
    onClose={this.props.onUniversityClose}
    getOptionLabel={(option) =&gt; option._id}
    options={universityOptions}
    loading={uniLoading}
    // disabled={disableUniversity}
    renderInput={(params) =&gt; (
      &lt;TextField
        {...params}
        label="Search for university"
        fullWidth
        variant="filled"
        margin="dense"
        InputProps={{
          ...params.InputProps,
          endAdornment: (
            &lt;React.Fragment&gt;
              {uniLoading ? (
                &lt;CircularProgress color="inherit" size={20} /&gt;
              ) : null}
              {params.InputProps.endAdornment}
            &lt;/React.Fragment&gt;
          ),
        }}
      /&gt;
    )}
  /&gt;
  </code></pre>
  
  <p>Whenever click on <strong>Autocomplete search bar</strong>  API is called and data is saved on <strong>getUniversityOptions</strong> 
  Select any Value then we click on the cross icon of <strong>Autocomplete search bar</strong> and data has cleared. But I want that this data will clear using Onclick function Whenever Click on Button the data will clear. So How it's possible to do it. </p>