Send a value from one component to another in react

Question

I have made a Login and registration system in my MERN app and there is a problem i am not able to solve, the thing is I have made a system where when a user registers, I send him to verification page (using 'useNavigate' hook) where user receives an OTP on Gmail but the problem is I want to show the name of the user on this page like 'hi {username}' but I don't know how can I send this data from registration page and no idea how to use props here.I am adding minimal code to explain my problem :- registration page code :-

const postregister = async (e) => {
  e.preventDefault();

  const { first_name, second_name, email, new_password, date, gender } =
    userregister;

  const res = await fetch('/register', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      first_name,
      second_name,
      email,
      new_password,
      date,
      gender,
    }),
  });

  const data = await res.json();
  console.log(data);
  if (data.status === 201) {
    Navigate('/verify');
    //here i am navigated to verification page because i got status code 201 from my server
  }
};

This is function which triggers when someone clicks on the submit button I am having all the user's data in a state saved already, after this i just redirected to verification page