How can I pass the parameters to a form on a separate url in react js? – Reactjs

I have a parking lot on url "/home" where the user is to select a date and the select a spot before clicking a button ("book a spot") that redirects them to "/home/book". On this page a form is presented to the user, and the form should present the date, time, and parking spot selected by the user in the previous url/page ("/home").

How can I pass these parameters from "/home" to the form on "/home/book"? If this is not the ideal method, what would be?

What works: I can see the parking spot "id", as well as, the "date" selected by the user.

ParkingMap Code

export default function ParkingMap(){    
    
    const navigate = useNavigate(); // the navigation hook
    const [data, setData] = useState(null);
    const [date, setDate] = useState('');
    const dateInputRef = useRef(null);
    const [isActive, setIsActive] = useState(false);
    const [spot, setSelectedSpot] = useState(null);


    useEffect(() => {
        getSpots();
    }, []);

    function getSpots() {
       fetch('http://localhost:3001/parking-data/') 
        .then(response => {
            return response.json();
        })
        .then(data => { 
        console.log("data " + data)
        setData(data);              
        });
    }

    if( !data ){
        return <div/>  
    }

    const parkingSpots = data.data.parking_spots;
    console.log(parkingSpots);

    const handleChange = (e) => {
        setDate(e.target.value);
    };

    const changeSpot = (e) => {        
        console.log("target id is " + e.target.id) // returns the spot selected
        setSelectedSpot(e.target.id);
        setIsActive(current => !current);
        console.log(" passed the setIsActive code ");
    };

    // this doesnt work lol
    const handleSubmit = (e) => {
        e.preventDefault();
        navigate("/home/booking/");
    };

    return (
        <div>
            <h1>Selected Date: {date} </h1> // need the selected date from here
            <input
                    type="date"
                    onChange={handleChange}
                    ref={dateInputRef}
            />   
            <div class="flex-container-parking">
                <div class="flex-parking-left">                  
                    <div 
                        className='parkingSpot'
                        id="5" 
                        onClick={changeSpot}
                        style={{ 
                            backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 5 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
                            borderColor: isActive ?  'green' : 'red'
                            }}>
                        <div className='circle'>  
                            <AccessibleIcon/>  
                        </div>
                    </div>
                        <hr />
                        <div 
                            id="1"
                            onClick={changeSpot}
                            className='parkingSpot' 
                            style={{ 
                                backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 1 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
                                borderColor: isActive ?  'green' : 'lightblue'
                            }}
                        >
                            <div className='circle'> 
                                1 
                            </div>
                        </div>

                    <hr/>
                    <div 
                        className='parkingSpot' 
                        id="2"
                        onClick={changeSpot}
                        style={{ 
                            backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 2 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
                            borderColor: isActive ?  'green' : 'lightblue'
                        }} >
                        <div className='circle'> 
                            2 
                        </div>
                    </div>
                </div>
                </div>  
            </div>
        <Button variant="contained" onSubmit={handleSubmit}> Next  </Button> // ideally this should navigate to the booking form page

     </div>
    );
};

The code for the booking form:

export default function BookingForm(){

    const navigate = useNavigate(); // the navigation hook
    
    const handleClick = event => {
        event.preventDefault();
        navigate('/home'); //redirects to the /home address
    }
    
    
     const handleSubmit = event => {
        event.preventDefault();
        navigate('/home/booking/QRCode'); //redirects to the /home address
    }

    // need to add post request of parking spot, date, full name, car type, license plate, phone number

    return (
        <div className='flex-container'>
            <div className='row'>
                    <div className="flex-container-accessories">
                        <div class="flex-accessories">
                            <div 
                                className='backButton' 
                                id="icon"                     
                                onClick={handleClick}
                                >                 
                            <ArrowBackIosIcon 
                                className="icon" 
                                sx={{fontSize: 'medium'}}
                            /> 
                        </div>
                    </div>
                </div>
            </div>
        
            {/* <BackIcon onClick={handleClick}> </BackIcon> */}

        <div className='row'>
            <header>      
                <div>
                    {/* based off parking spot id: book for {spot}, date {date}, time {time} */}
                    <h2> Spot # <br/> Date  <br/> Time </h2>
                </div>
            </header>
        </div>

        <div className='row'>
            <Box
                component="form"
                sx={{
                    '& > :not(style)': { m: 1},
                }}
                noValidate
                autoComplete="off"
                >
                <TextField id="outlined-basic" label="Full Name" variant="outlined" size="small" />
                <TextField id="outlined-basic" label="Email" variant="outlined" size="small"/>
                <TextField id="outlined-basic" label="Car Type" variant="outlined" size="small"/>
                <TextField id="outlined-basic" label="License Plate" variant="outlined" size="small" />      
                <TextField id="outlined-basic" label="Phone Number" variant="outlined" size="small"/>
                <Button variant="contained" onClick={handleSubmit}> Submit </Button>
            </Box>
        <div className="row">
            <ParkingLegend/>
        </div>   
        </div>
    </div> 
    );
};

Each parking spot on "/home" is a div and customized with a class. Inside, the spot has an ‘id’ parameter which is used to classify the spot "selected". To determine if a spot is selected or not I have a changeSpot with e.target.value which returns with the id of the spot "selected". The process of selecting a date follows a similar pattern.