Estoy usando el componente TextField de Mui en TypeSCript y quiero borrar TextField después de presionar la tecla ENTER.

Aquí está mi fragmento de código

 <TextField {...params} autoFocus className="SymbolInput" onChange={(e) => { setSearchTerm(e.target.value); handleInputdebounced(e.target.value); }} onBlur={clearState} onFocus={() => setSearchResults([])} placeholder="Add symbols" name="searchname" onKeyPress={(e) => { if (e.key === 'Enter') { onPressEnter(); setSearchTerm(''); } }} InputProps={{ ...params.InputProps, type: 'search', sx: { pb: '2px', pt: '2px' }, endAdornment: ( <InputAdornment position="end" sx={{width:0}}> {loading ? <CircularProgress color="inherit" size={20} /> : <SearchIcon />} </InputAdornment> ), }} inputProps={{ ...params.inputProps, sx: { textTransform: 'uppercase', }, }} /> const onPressEnter = async () => { if (searchTerm && searchTerm.length > 0) { onAddSymbol(searchTerm); } }; const handleSearchChange = async (searchTerm: string) => { const searchValue = searchTerm; //Check if there are any previous pending requests if (typeof autoCompleteCancelToken != typeof undefined) { autoCompleteCancelToken?.cancel('Operation canceled due to new request.'); } //Save the cancel token for the current request autoCompleteCancelToken = axios.CancelToken.source(); if (searchValue && searchValue.length > 0) { setLoading(true); setSearchTerm(searchTerm); const response = await companyLookup(searchTerm, { cancelToken: autoCompleteCancelToken?.token }); if (!response.hasErrors) { setSearchResults(response.data || []); } setGetValue(searchValue); setEditable(false); setLoading(false); } if (searchValue.length == 0) { setSearchResults([]); } }; const handleInputdebounced = useMemo(() => debounce(handleSearchChange, 200), []);

Estoy configurando el valor de textfield (searchTerm) en setSearchTersm useState pero no funciona.

¿Alguien puede ayudarme con esto?