Why am I unable to pass data through useNavigate() in ReactJS?

Question

I am trying to pass props to another component during navigation. Currently I am using useNavigate to pass the url. However I am unable to pass other data along with the url. While fetching the passed data in my receiving component, the data is showing up as null or undefined. I have used router.params method, state method but both dont seem to work.

Here is my infoModal.js component from where I have to pass data :-

import React, {useState} from "react";
import {Modal, Button }from 'react-bootstrap';
import {useNavigate } from "react-router-dom";

export default function InfoModal(props) {
  const navigate = useNavigate();
  const showname = props.name;
  const navigateTo = () => {navigate('/form', showname);};
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const originalStr = props.summary;
  const newStr = originalStr.replace(/(<([^>]+)>)/ig, '');
  return (
    <>
      <Button className="nextButton mx-2 my-1" onClick={handleShow}>
        Details
      </Button>

      <Modal show={show} onHide={handleClose}>
      <div class="modal-header h4">
       {props.name}
      </div>
        <Modal.Body>{newStr}</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={navigateTo}>
            Book Now
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Here is my Form.js file where I want to receive data-

import {useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";


function Form() {
    const location = useLocation();
    const data = location.showname;
    console.log('location', data);
    const navigate = useNavigate();
    const navigateTo = () => navigate('/');



    return (
        <form class="container-fluid my-3"> 
        <div class="form-group mx-3">
          <label>Movie Name</label>

          <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="As It Was">
            </input>
        </div>
        <div class="form-group mx-3">
          <label>Email address</label>
          <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
            </input>
        </div>
        <div class="form-group mx-3">
          <label for="exampleFormControlSelect1">Timing</label>
          <select class="form-control" id="exampleFormControlSelect1">
            <option class="mx-3">9:00 a.m.</option>
            <option>12:00 p.m.</option>
            <option>3:00 p.m.</option>
            <option>6:00 p.m.</option>
            <option>9:00 p.m.</option>
          </select>
        </div>
        <div class="form-group mx-3">
          <label for="exampleFormControlSelect1">Day</label>
          <select class="form-control" id="exampleFormControlSelect1">
            <option class="mx-3">Today.</option>
            <option>Tomorrow</option>
            <option>Day After Tomorrow</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary mx-3">Submit</button>
        <button type="submit" class="btn btn-secondary mx-3" onClick={navigateTo}>Cancel</button>
      </form>
    )
}

export default Form;

Currently I am logging the data in console. Any help would be appreciated!