How to pass input value to another react component - reactjs

Question

I'm making a react project for practice, where I have multiple forms, distributed across multiple pages and I'm using react components for each page with the help of react routing. I have a submit page in the end where the user is able to press the button and I need all the form values from previous pages so that I can use it as parameters to POST it on a REST API. Since I'm new to react, I'm having a hard time figuring out how to pass all these data to this submit page component, any help or advice would be appreciated!
This is one component for one of the pages, for instance :
Personal.jsx
function Personal(){
const text = "You watch “What? Where? When?” Yeah. Our founders used to play it. That’s where they got a question about a famous American author and screenwriter Ray Bradbury. Albeit, our CEO Gaga Darsalia forgot the exact name and he answered Ray Redberry. And at that moment, a name for a yet to be born company was inspired - Redberry 😇"
const [fName, setfName] = useState("");
const [lName, setlName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
return (
<div className="personal-container">
<div className="leftDiv">
<h1 className="coordinates-h1">Hey, Rocketeer, what are your coordinates?</h1>
<div className="inputDiv">
<form>
<Input value={fName} type="text" onChange={(e) => setfName(e.target.value)} required placeholder="First Name"/>
<Input value={lName} type="text" onChange={(e) => setlName(e.target.value)} required placeholder="Last Name"/>
<Input value={email} type="email" onChange={(e) => setEmail(e.target.value)} required placeholder="E Mail"/>
<Input value={phone} onChange={(e) => setPhone(e.target.value)} pattern="[5]{1}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}" type="tel" placeholder="+995 5_ _ _ _"/>
</form>
</div>
<div>
<PersonalSVG />
</div>
</div>
<div className="rightDiv">
<h1 className="origins-h1">Redberry Origins</h1>
<p className="origins-p">{text}</p>
</div>
</div>
)
}
export default Personal;
I need to pass these input values to the submit page : Submit.jsx :
function Submit(){
const style = {
color:"white",
textDecoration : "none"
}
const onSubmit = (e) => {
console.log("submitted");
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
"token": "76977183-c0e1-4f49-b51d-34e590260b10",
"first_name": "gela",
"last_name": "gelashvili",
"email": "gelashvili#gela.ge",
"phone": "[phone]",
"skills": [
{
"id": 1,
"experience": 3
}
],
"work_preference": "from_home",
"had_covid": true,
"had_covid_at": "2022-02-23",
"vaccinated": true,
"vaccinated_at": "2022-02-23",
"will_organize_devtalk": true,
"devtalk_topic": "I would ...",
"something_special": "I am special!"
})
};
fetch('https://bootcamp-2022.devtest.ge/api/application', requestOptions)
}
return (
<div className="submitDiv">
<Link style={style} to="/thanks"><button onClick={onSubmit} className="submitButton">Submit</button></Link>
<div><a><Link style={style} to="/about"><h2>go back</h2></Link></a></div>
</div>
)
}
export default Submit;
I'm looking for replacing the custom strings in the post body, with actual input values. Thanks in advance