onSubmit実行時に配列に要素を追加する関数を実行したものの、要素を配列に追加できない

前提

名前を入力してAddボタンを押すとnames配列に名前を追加できます。

javasciprt
1const [names, setNames] = useState([]);
2const nameRef = useRef(null);
3
4const addName = () => {
5  const nameInput = nameRef.current;
6  if (!nameInput.value) return;
7  const name = {
8    id: uuidv4(),
9    name: nameInput.value
10  };
11  setNames([...names, name]);
12  nameInput.value = "";
13};

names配列は確認のため描画します

javascript
1const addedNames = names.map((name) => <li key={name.id}>{name.name}</li>);

submitボタンを押すと、submit時のnames配列とDateをコンソールに表示します。

javascript
1const submitData = {
2  names: names,
3  date: new Date,
4}
5console.log(submitData)

実現したいこと

名前を入力するフォームに値が入った状態でAddボタンを押すことなくsubmitを押した場合、フォームの値をnames配列に追加してからsubmitしたいです。

例えばフォームにhogeと入力してsubmitを押したら、hogeが追加されたnames配列をコンソールに表示したいです。

ユーザーがAddボタンを押し忘れてしまった際の対応策として、実装したいと考えています。

発生している問題

submit押下時にAddする関数を実行しているものの、コンソールに表示されるnames配列には名前が追加できていません。
ただし、追加した名前は描画されます。
追加した名前が描画された状態でsubmitを押下すると、描画された名前が追加されたnames配列が、コンソールに表示されます。

例えば下記挙動になります。

フォームに"hoge"を入力
submit押下
コンソールのnames配列に名前を追加できていない、かつその名前は描画
続けて再度submitを押下
名前が追加されたnames配列がコンソールに表示

また、Add押下時にsubmitする関数が実行されます。

該当のソースコード

javascript
1import { useState, useRef } from "react";
2import { v4 as uuidv4 } from "uuid";
3
4export default function App() {
5  const [names, setNames] = useState([]);
6  const nameRef = useRef(null);
7
8  const addName = () => {
9    const nameInput = nameRef.current;
10    if (!nameInput.value) return;
11    const name = {
12      id: uuidv4(),
13      name: nameInput.value
14    };
15    setNames([...names, name]);
16    nameInput.value = "";
17  };
18
19  const addedNames = names.map((name) => <li key={name.id}>{name.name}</li>);
20
21  const submit = (e) => {
22    e.preventDefault();
23    addName();
24    if (names.length < 1) return;
25    const submitData = {
26      names: names,
27      date: new Date()
28    };
29    console.log(submitData);
30  };
31
32  return (
33    <form onSubmit={submit}>
34      <div>
35        <input type="text" ref={nameRef} />
36        <button onClick={addName}>Add</button>
37      </div>
38      {names.length > 0 && <ul>{addedNames}</ul>}
39      <button type="submit">Submit</button>
40    </form>
41  );
42}