親ページに保持しているstateを子ページから取得し、値をWebページに出力する方法を教えてください

以下のWebサイトのような問い合わせフォームをNext.jsで作りたいと思っています。
ubie

親ページに保持しているstateをどうやって子ページ側で取得、値の出力をしたら良いか教えてください。

[やりたいこと]

問い合わせフォームの問い合わせ内容を複数ページに分割し、
最終的には確認画面を表示し、各フォームに入力した内容を1ページで表示したいと思っています。
そのためには親ページに保持しているstate(コード上では"formData")を取得し、値の出力が必要となっています。

[できていること]

親ページにstateを保持し、子ページから親ページのstateを更新することはできています。
また、子ページを増やすことで各子ページに入力した内容が親ページのstate(コード上では"formData")に保持されることは確認済みです。

[できないこと]

子ページから親ページのstateを参照できません。
そのため確認画面想定の子ページに各子ページで入力した内容を出力、表示できません。

構成

- _app.js...親ページ
- contact
+- step1.js...子ページ.問い合わせフォームを想定(親ページのstateを更新)
+- step2.js...子ページ.確認画面を想定(親ページのstateを取得し、表示)

_app.js

Javascript
1import { useState } from "react"
2
3const AppComponent = ({ Component, pageProps }) => {
4  const [formData, setFormData] = useState({});
5  const updateFormData = (newData) => {
6    setFormData({ ...formData, ...newData });
7  };
8  return <Component {...pageProps} updateFormData={updateFormData} formData={formData} />;
9};
10
11export default AppComponent;

step1.js

Javascript
1import { useRouter } from "next/router";
2
3function Step1({ updateFormData }) {
4    const router = useRouter()
5    const handleNameChange = (event) => {
6        updateFormData({ name: event.target.value });
7    };
8    const handleSurNameChange = (event) => {
9        updateFormData({ surname: event.target.value });
10    };
11    return (
12        <div>
13            <p>
14                Name: <input name="name" onChange={handleNameChange} />
15            </p>
16            <p>
17                SurName: <input name="surname" onChange={handleSurNameChange} />
18            </p>
19            <button type="button" onClick={() => router.push("step2")}>
20                Next
21            </button>
22        </div>
23    );
24}
25
26export default Step1;

step2.js

Javascript
1function Step2({formData}) {
2    return (
3        <>
4            <p>
5                {formData}
6            </p>
7        </>
8    );
9}
10
11export default Step2;