[React]親コンポーネントで再描画が実施されない

前提・実現したいこと

子コンポーネントのテキストフィールドに入力した文字を親コンポーネントのstateで配列として管理して、各文字が表示されたchipコンポーネントを表示しようとしています。
しかし、stateは更新されるのですが、okクリック時に再描画されません。
その後、chipの削除ボタンをクリックすると削除と同時に再描画され、子コンポーネントで行なった追加ができていることが確認できます。
OKボタンをクリックした時点で再描画したいのですが、原因がわかりません。
わかる方がいましたらコメントお願いします。

該当のソースコード


const useStyles = makeStyles(theme => ({
  //略
}));

export default function Register_Person() {
  const classes = useStyles();
  
  const [personNames, setPersonNames] = useState(['サンプル']);

  return (
    <div className={classes.parent}>
        <Grid container className={classes.root_} spacing={2}>
        <Grid item xs={12}>
          <Grid container justify="center" spacing={2}>
            <Grid key={0} item>
              <FormDialog props={personNames} onSubmit={setPersonNames} /> //該当箇所
              <Paper className={classes.paper_}>
                <div className={classes.chipGroup}>
                  {personNames.map((name, index) =>　//該当箇所
                    <Chip　
                      icon={<PersonIcon />}
                      key={index}
                      label={name}
                      onClick={handleClick(name)}
                      onDelete={handleDelete(index)}
                      className={classes.chip}
                    />)}
                </div>
              </Paper>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default function FormDialog({ props, onSubmit }) {
  //省略
  const temp = props;

  const handleSubmit = () => {
    temp.push(inputRef.current.value);
    onSubmit(temp);
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        add new member
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">名前登録</DialogTitle>
        <DialogContent>
          <DialogContentText>
            名前を記入してください
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Name"
            type="email"
            fullWidth
            inputRef={inputRef}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleSubmit} color="primary">
            OK
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}