I'm developing a contact form and I want to develop it like the following page. https://ubie.app/

So, I created _app.js as the parent page and step1.js, step2.js as children pages.

- _app.js...Parent page
- contact
+- step1.js...Child page1(Store current state to parent page)
+- step2.js...Child page2(Get current parent state)

Could you tell me how can I show the parent state on the child page2? I don't know how can I get it. I saw the following page and understood how to set state, but not sure how to get state from the parent. How can I pass data in multi-step forms in NextJS?

_app.js

import '../styles/globals.css'
import { useState } from "react"

const AppComponent = ({ Component, pageProps }) => {
  const [formData, setFormData] = useState({});
  const updateFormData = (newData) => {
    setFormData({ ...formData, ...newData });
  };
  return <Component {...pageProps} updateFormData={updateFormData} formData={formData} />;
};

export default AppComponent;

step1.js

import { useRouter } from "next/router";

function Step1({ updateFormData }) {
    const router = useRouter()
    const handleNameChange = (event) => {
        updateFormData({ name: event.target.value });
    };
    const handleSurNameChange = (event) => {
        updateFormData({ surname: event.target.value });
    };
    return (
        <div>
            <p>
                Name: <input name="name" onChange={handleNameChange} />
            </p>
            <p>
                SurName: <input name="surname" onChange={handleSurNameChange} />
            </p>
            <button type="button" onClick={() => router.push("step2")}>
                Next
            </button>
        </div>
    );
}

export default Step1;

step2.js

function Step2({formData}) {
    return (
        <>
            <p>
                {formData}
            </p>
        </>
    );
}

export default Step2;