[React]propsで配列を受け取った時の扱い方がわからない

Question

前提・実現したいこと

propsの一つに配列を受け取りたいのですが、受け取った後の扱い方がわかりません。
調べてみてもファンクションコンポーネントにおける配列の受け渡しに関するものがヒットしませんでした。
ちなみに受け取る方でpropsとしてまとめなかった場合は同じような書き方でうまく行きました。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

Uncaught TypeError: Invalid attempt to spread non-iterable instance

該当のソースコード

const [personNames, setPersonNames] = useState(['サンプル']);

<FormDialog id="1" personNames={personNames} onSubmit={setPersonNames} />

export default function FormDialog(props) {
  //省略
  const temp = [...props.personNames];　//該当箇所

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