PageOne.tsx

import React from "react";
import { useHistory } from "react-router-dom";
import { useForm } from "react-hook-form";

import { useGlobalState, GlobalStateInterface } from "./GlobalStateProvider";

const PageOne = () => {
  const history = useHistory();
  const { handleSubmit, register } = useForm();
  const { setState } = useGlobalState();

  const submitFunction = (data: Partial<GlobalStateInterface>) => {
    setState((prev) => ({ ...prev, ...data }));
    history.push("/two");
  };

  return (
    <div>
      <h1>PAGE ONE</h1>

      <form onSubmit={handleSubmit(submitFunction)}>
        <div>
          <label htmlFor="firstname">First name:</label>
          <input ref={register} type="text" id="firstname" name="firstname" />
        </div>

        <div>
          <label htmlFor="lastname">Last name:</label>
          <input ref={register} type="text" id="lastname" name="lastname" />
        </div>

        <div>
          <label htmlFor="age">Age:</label>
          <input ref={register} type="number" id="age" name="age" />
        </div>

        <button type="submit">Next Page</button>
      </form>
    </div>
  );
};

export default PageOne;