How can I pass a value from one page to another in a React app? – Reactjs

I can find people doing this in the old syntax but not with ES6. how do i pass the userId you get from clicking on the username to the userProfile?

here is my userprofile.js

import React, { useState } from "react";
import "../Home/Home.css";
import NavBar from "./../Navbar/Navbar";
import { useLocation } from "react-router-dom";

const UserProfile = () => {
  const [user, setUser] = useState(null);
  const { state } = useLocation();
  const userId = state?.userId;
  

  console.log(userId);

  return (
    <div className="Home">
      <NavBar />
      <div>
        <h1>{userId}</h1>
      </div>
    </div>
  );
};

export default UserProfile;

here is addFreinds.js

import React, { useState, useEffect } from "react";
import { QUERY_USER, QUERY_ME } from "../../utils/queries";
import { useLazyQuery, useMutation, useQuery } from "@apollo/client";
import { ADD_FRIEND } from "../../utils/mutations";
import { useNavigate } from "react-router-dom";


const AddFriend = ({ username, currentUser, myId }) => {
  const [addFriend] = useMutation(ADD_FRIEND);
  const [getUser, { loading, data, error }] = useLazyQuery(QUERY_USER, {
    variables: { username: username },
  });
  const navigate = useNavigate();

  const userId = data?.user?._id;
  const friend2 = currentUser;
  console.log(friend2);

  const handleAddFriendClick = async () => {
    await getUser();
    navigate({
      pathname: `/UserProfile/${userId}`,
      state: { userId: userId },
    });
  };
  

  console.log(userId);
  
  return (
    <>
      <p onClick={handleAddFriendClick}>
        {username}{" "}
        </p>
    </>
  );
};

export default AddFriend;

here is my routes

function App() {
  return (
    <ApolloProvider client={client}>
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/home" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/likes" element={<LikesPage />} />
          <Route path="/Search" element={<Search />} />
          <Route path="/UserProfile/:userId" element={<UserProfile />} />
        </Routes>
      </Router>
    </ApolloProvider>
  );
}

Tried a couple things but have not been successful, any help would be greatly appreciated.