...
import { useNavigate, NavigateFunction } from "react-router";
...

function Form(): JSX.Element {
  const navigate: NavigateFunction = useNavigate();
  const [country, setCountry] = useState<string>(" ");

  
  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    setCountry(e.target.value);
  };

  const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    navigate("/country");
  };



  return (
    <Box component="form" onSubmit={handleSubmit}>
      <input
        type={"text"}
        required
        placeholder="Enter Country"
        value={country}
        onChange={handleChange}
      ></input>
      <Button variant={"contained"} type="submit">
        Search
      </Button>
    </Box>
  );
}
export default Form;

this is my index.tsx file:

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/country"  element={<CountryDetails   />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

this is my CountryDetails.tsx file:

const CountryDetails = (): JSX.Element => {
    const country: string | undefined = useParams().name;

    
    return (

       
        <Box>
           hi ${country}
        </Box>
    )
}
export default CountryDetails;

I want to send the country variable from Form.tsx to CountryDetails.tsx file. How do I send it. I am doing the route operations in index file. I tried to send it as props, as state also, even used link to instead of navigate function. Used history.push too. Please help.