React useContext to pass person object from signup to phone verification

Question

I working on a portal using react and I am trying to pass the form data which is an object from the signup page to the phone verification page so I can verify and update the phone number in the database.

Below is the phone verification page :

import React, { useContext, useState } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import "../Styles/phone.css";
import { Link } from "react-router-dom";
import axios from "axios";
import { personContext } from "../Components/Signup- 
component";
import { event } from "jquery";

function Phone() {
  const [person, setperson] = useContext(personContext);
  function clicked() {
    console.log(person);
const url = "http://localhost:5000/users";

axios
  .put(url, { person })
  .then((res) => console.log(res))
  .catch((err) => console.log(err.message));
  }
  return (
<div>
  <div className="contained">
    <div className="verify mx-auto align-items-center">
      <PhoneInput
        inputProps={{
          name: "phone",
          required: true,
          autoFocus: true,
        }}
        country={"ng"}
        className="phone"
        countryCodeEditable={false}
        value={this.state.phone}
        onChange={(phone) =>
          setperson({
            ...person,
            phone: `${event.target.value}`,
          })
        }
        // onChange={(phone) => this.setState({ phone })}
      />
      <br />
      <Link to="/Verify" className="text-decoration-none">
        <button className="d-block phone-submit mt-3" onClick={clicked}>
          SUBMIT
        </button>
      </Link>
    </div>
  </div>
</div>
  );
}

export default Phone;

below is the Signup component

import React, { createContext, useState } from "react";
import "../Styles/signup.css";
import "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import axios from "axios";

export const personContext = createContext();

function Signup() {
  const [person, setperson] = useState({
FullName: "",
username: "",
email: "",
password: "",
confirmPassword: "",
phone: "",
  });

  function clicked() {
console.log(person);
const url = "http://localhost:5000/createUser";

axios
  .post(url, { person })
  .then((res) => console.log(res))
  .catch((err) => console.log(err.message));
  }

return (
<personContext.Provider value={[person, setperson]}>
<form action="/createUser" method="POST">
<input
                    type="text"
                    name="fullname"
                    placeholder="Fullname"
                    pattern="[A-Za-z]{9,32}"
                    className="inp input"
                    required
                    autoFocus
                    onChange={(event) => {
                      setperson({
                        ...person,
                        FullName: `${event.target.value}`,
                      });
                    }}
                  />
....
</form>
</personContext.Provider>
)
export default Signup;

i would appreciate if anyone could help, i am new to react and working to build a nice project.