React + Material-UI でタグのような複数指定できるフォームを作るには

"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"react": "^16.13.1",

import { useState } from "react";
import AddIcon from '@material-ui/icons/Add';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import IconButton from '@material-ui/core/IconButton';
import TextField from '@material-ui/core/TextField';

const filter = createFilterOptions();

export default function TaskCreateForm(props) {
  const [tags, setTags] = useState([]);
  const [addFormOpen, setAddFormOpen] = useState(false);


  const handleClickAddFormOpen = () => {
    setAddFormOpen(true);
  };

  const handleAddFormClose = () => {
    setAddFormOpen(false);
  };

  const add = () => {
    setTags([]);
    console.log(tags);
    handleAddFormClose();
  }

  return (
    <div>
      <IconButton aria-label="add" color="primary" onClick={handleClickAddFormOpen}>
        <AddIcon />
      </IconButton>

      <Dialog open={addFormOpen} onClose={handleAddFormClose} aria-labelledby="form-dialog-title">
        <DialogContent style={{ minWidth: 400 }}>
          <form className={classes.formRoot} noValidate autoComplete="off">
            <div>
              <Autocomplete
                id="tags"
                size="small"
                options={[]}
                getOptionLabel={(option) => {
                  // Value selected with enter, right from the input
                  if (typeof option === 'string') {
                    return option;
                  }
                  // Add "xxx" option created dynamically
                  if (option.inputValue) {
                    return option.inputValue;
                  }
                  // Regular option
                  return option.title;
                }}
                multiple // 複数可
                freeSolo // 自由入力可
                clearOnBlur // 新規選択肢を追加可
                filterOptions={(options, params) => {
                  const filtered = filter(options, params);
                  // Suggest the creation of a new value
                  if (params.inputValue !== '') {
                    filtered.push({
                      inputValue: params.inputValue,
                      title: params.inputValue,
                    });
                  }
                  return filtered;
                }}
                onChange={(e,v) => setTags(v.map(tag=>tag.title ? tag.title : tag))}
 //★ ←複数のテキストを取得するにはココ必要(※追記修正2020/12/20)
                renderInput={(params) => (
                  <TextField
                    {...params}
                    label="tag"
                    variant="standard"
                    // onChange={(e) => {setTags(e.target.value)}} //★ ←ココは消してOK(※追記2020/12/20)
                  />
                )}
              />
            </div>
          </form>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleAddFormClose} color="primary">
            Cancel
          </Button>
          <Button onClick={add} color="primary" variant="contained">
            Add
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}