how to render data for clicked component on other different page in React JS

Question

I am creating a CRM portal on the dashboard by fetching API I rendering on Pending Queries data in table form with the button "Show Details". So whenever someone clicks on this button it should render on the different page where I can all details related to that query from API into it but somehow I don't know how to achieve the same functionality.

Experts advice is required, for reference I putting a demo link of the code here: - https://codesandbox.io/s/currying-hill-gqlmhn?file=/src/App.js

Details.js

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

const QueriesView = () => {
  const navigate = useNavigate();
  const [queryData, setqueryData] = useState([]);
  const [status, setState] = useState("Pending");

  useEffect(() => {
    const fetchData = async () => {
      let url =
        "https://script.google.com/macros/s/AKfycbykZx2qtz39U5j8TwDRVuziKfoLzF6YkYvDL6Ejoj822Vg9MPe1pDS9PX86IeP1Kzw82Q/exec?request=getQueriesData";
      try {
        const response = await fetch(url);
        const json = await response.json();
        setqueryData(json);
      } catch (err) {
        console.log("catching error");
      }
    };
    fetchData();
  }, []);

  const getStatus = (e) => {
    let clicked = e.target.value;
    setState(clicked);
    console.log(clicked);
  };

  return (
    <>
      <div className="container mt-2">
        <div className="row mb-2">
          <div className="col-sm-10 col-lg-3 col-md-4">
            <select
              className="form-select form-select-sm"
              aria-label=".form-select-sm example"
              name="status"
              onChange={getStatus}
              value={status.value}
            >
              <option value="Pending">Pending</option>
              <option value="Resolved">Resolved</option>
              <option value="Rejected">Rejected</option>
            </select>
          </div>
        </div>
        <table class="table table-hover table-sm">
          <thead class="thead-dark">
            <tr>
              <th scope="col">Date</th>
              <th scope="col">Query Number</th>
              <th scope="col">Email</th>
              <th scope="col">Full Name</th>
              <th scope="col">Phone No.</th>
              <th scope="col">Status</th>
              <th scope="col">Details</th>
            </tr>
          </thead>
          <tbody>
            {queryData
              .filter((item) => item.querystatus === status)
              .map((ele, i) => (
                <tr id={i++}>
                  <th scope="row">{ele.querydate}</th>
                  <td>{ele.querynumber}</td>
                  <td>{ele.email}</td>
                  <td>
                    {ele.firstname} {ele.lastname}
                  </td>
                  <td>{ele.contact}</td>
                  <td>{ele.querystatus}</td>
                  <td>
                    <button type="button" onClick={() => navigate("/details")}>
                      Details
                    </button>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </>
  );
};

export default QueriesView;

Details.js

import React from "react";

const Details = () => {
  return <div>props.firstname</div>;
};

export default Details;