Reactコンポーネント間の値の受け渡しについて

前提・実現したいこと

#####前提
「react-hook-form」を使ってお問い合わせフォームを作成しています。
システムの流れは、「入力」>「確認」>「送信」になります。

#####実現させたいこと
「入力画面」で取得した値を「確認画面」に反映させたいです。

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

該当のソースコード

以下コードの簡略化のため名前のみ実装にしています。
↓「入力画面」

React
1//Next.js
2
3
4// components
5// 「確認画面」のコンポーネント
6import ConfirmForm from "@/components/organisms/confirmForm"
7// hooks
8import Router from "next/router";
9// library
10import { useForm } from "react-hook-form";
11
12
13//react-hook-form独自のメソッドを使用しています
14const Form = () => {
15  const {
16    register,
17    handleSubmit,
18    formState: { errors },
19  } = useForm();
20
21  //　「data」にinputのデータが入っています
22  const onSubmit = (data) => {
23    //確認画面のオブジェクトに引数としてデータを渡している
24    ConfirmForm(data)
25    Router.push("/contact/confirm");
26
27    console.log(data)
28   // -> {name: "名前"}
29　　　　　　　　console.log(data.name)
30   // -> 名前
31  };
32
33  return (
34    <form onSubmit={handleSubmit(onSubmit)}>
35      <div>
36        <div>
37          <FormTitle title="お名前" text="*" />
38          {errors.name && (
39            <span>
40              お名前を入力してください
41            </span>
42          )}
43        </div>
44        <input
45          id="name"
46          name="name"
47          type="text"
48          {...register("name", { required: true })}
49        />
50      </div>
51
52      <div>
53        <button type="submit">
54          内容を確認する
55        </button>
56      </div>
57    </form>
58  );
59};
60
61export default Form;
62

↓「確認画面」

const ConfirmForm = (data) => {
  console.log(data)
 // -> {name: "名前"}
 // -> {}
 // オブジェクトと空のオブジエクト二つが返ってきます。（Why?）

  return (
    <div>
      <p>お名前</p>
      <p>{data.name}</p>
      {/*↑ここにはおそらく空のオブジェクトが入ってる */} 
    </div>
  );
};

export default ConfirmForm;

教えていただきたいこと

・データの受け渡し方法
・なぜconsole.log1つで2つのオブジェクトが帰ってきているのか。

補足情報（FW/ツールのバージョンなど）

Next.js
TailwindCSSを使用しています。
react-hook-form ver.7

初心者なので、周りに質問できる環境がなく詰まってました、、、、、
恐れ入りますが、どの段階で間違っているのかのヒントをいただければと思っています。

hoshi-takanori

2021/07/19 06:53 編集

Next.js はよく分かりませんが、React で画面間でデータを受け渡すには、親コンポーネントでそのデータを管理するか、Redux などを使う必要があります。また、ConfirmForm は React コンポーネントなら、ConfirmForm(data) のように直接呼び出しても意味はありませんし、props の受け取り方も怪しいですね…。