So I'm learning about how to use form input across my React app projects. I'm not really sure how to do it, props dosen't really seem to cut it. So if I have two components, one with a form, and another that I just want to show the input. I dont want to render the two components at once but rather wish to redirect the user to another view where the input is shown. Below is the code for the simple form.

import React from 'react'
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Second from '../view/second/Second';

    const Form = () => {
    const navigate = useNavigate();

    const [namn, setNamn] = useState('');
    const [personNr, setPersonNr] = useState('');
    const [datum, setDatum] = useState('');
    const [planbok, setPlanbok] = useState('');

    
    return (

        <div>
            <form>
                <div>
                <input type="text" id="namnField" required value={namn} 
    onChange={(n) => setNamn(n.target.value)} placeholder='Namn'></input>
                </div>
                <div>
                <input type="text" id="personNrField" required value={personNr} 
    onChange={(pn) => setPersonNr(pn.target.value)} placeholder='Personnr'></input>
                </div>
                <div>
                <input type="text" id="datumField" required value={datum} 
    onChange={(d) => setDatum(d.target.value)} placeholder='Datum'></input>
                </div>
                <div>
                <input type="text" id="planbokField" required value={planbok} 
    onChange={(p)=>setPlanbok(p.target.value)} placeholder='Plånbokadress'></input>
                </div>
                <button type="submit" id="inputForm"onSubmit {navigate('/second')}>Enter</button>
            </form>
        </div>
    )
}

export default Form

And here is the component that I want to show the form input:

import React from 'react'
import Form from '../../form/Form'

const Second = ({namn, datum, personNr, planbok}) => {
    return (
        <div>
            <p>{namn}, {datum}, {personNr}, {planbok}</p>
        </div>
    )
}

export default Second

As you see I've tried to use props, this dosen't work. Sure I can render the component called in the component and I can populate with the form input. But this is not what I wish to achive, I want the variables from the form input to be shown when I render in a different view.

How would I achive this, should I use Ajax, the hook useContext? Is there some other way that is better to handle this type of situation? Thanks in advance for your time. Regards / Svante.