如何使用按钮清除material-ui搜索输入

import React, { useState } from 'react';
import { TextField, IconButton } from '@material-ui/core';
import { Clear } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  searchContainer: {
    display: 'flex',
    alignItems: 'center',
  },
  searchInput: {
    marginRight: theme.spacing(1),
  },
}));

const SearchInput = () => {
  const classes = useStyles();
  const [searchValue, setSearchValue] = useState('');

  const handleSearchChange = (event) => {
    setSearchValue(event.target.value);
  };

  const handleClearSearch = () => {
    setSearchValue('');
  };

  return (
    <div className={classes.searchContainer}>
      <TextField
        className={classes.searchInput}
        value={searchValue}
        onChange={handleSearchChange}
        placeholder="搜索"
      />
      {searchValue && (
        <IconButton onClick={handleClearSearch}>
          <Clear />
        </IconButton>
      )}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <SearchInput />
      {/* 其他组件和内容 */}
    </div>
  );
};