How to pass data from page to another page - reactjs

Question

Hello guys i have a react project made with react, node, express, and mysql. The thing is i want to get email from login and pass to home page. How do i do that, i dont want to use useParams() because the user can input their email in the link, i want to avoid that. Is there any way to do that and if you can, can you give code example.
Login
const Login = () => {
let navigate = useNavigate();
const [emailLog, setEmailLog] = useState("");
const [passwordLog, setPasswordLog] = useState("");
const [loginStatus, setLoginStatus] = useState("");
Axios.defaults.withCredentials = true;
const login = (e) => {
e.preventDefault()
Axios.post("http://localhost:3001/login" , {
email: emailLog,
password: passwordLog
}).then((response)=> {
console.log(response)
if(response.data.message) {
alert((response.data.message))
} else{
setLoginStatus(response.data[0].email)
alert("Redirecting")
navigate("/home")
}
})
}
useEffect(() => {
Axios.get('http://localhost:3001/login').then((response)=> {
if(response.data.loggedIn == true) {
setLoginStatus(response.data.email[0].email)
}
})
})
return (
<div>
<img className="wave" src={Wave} />
<img className="wave2" src={WaveV2} />
<div className="wrapper">
<div className="img">
{/* <img src={Background}/> */}
</div>
<div className="register-content">
<div className='registerForm'>
<img src={Avatar} />
<h2 className="title">Welcome</h2>
<div className="input-div one">
<div className="i">
<i className="fas fa-user"><GrMail /></i>
</div>
<div className="div">
<input type="email" className="input" placeholder='Email' required
onChange={(e)=> {
setEmailLog(e.target.value)
}}/>
</div>
</div>
<div className="input-div pass">
<div className="i">
<i className="fas fa-lock"><AiFillLock /></i>
</div>
<div className="div">
<input type="password" className="input" placeholder='Password' required
onChange={(e)=> {
setPasswordLog(e.target.value)
}}/>
</div>
</div>
Don't have an account ?
<button type='submit' className='btn' onClick={login} data={emailLog}>Login</button>
</div>
</div>
</div>
</div>
)
}
export default Login
App.js
function App() {
const [invoice, setInvoice] = useState("");
const [date, setDate] = useState ("");
const [currency, setCurrency] = useState ("IDR");
const [ myFile, setMyFile] = useState("");
const [test, setTest] = useState("anjay#anjay.com");
Axios.defaults.withCredentials = true;
return (
<div className="App">
<BasicExample />
<div className='formInput'>
<form method='POST' encType='multipart/form-data' action='http://localhost:3001/upload'>
<div className='textUser'>
<h1>{props.data}</h1>
</div>
<input className='inputForm' defaultValue={test} type="email" disabled name='email' />
<input className='inputForm' type="number" placeholder='Invoice No' name='InvoiceNo' />
<input className='inputForm' type="date" name='Invoice_Date' />
<input className='inputForm' type="text" placeholder='Description' name='Description' />
<select className='selectBox' name='Currency' onChange={(e)=> {
setCurrency(e.target.value);
}}>
<option value="IDR">IDR</option>
<option value="USD">USD</option>
<option value="YEN">YEN</option>
</select>
<input className='inputForm' type="number" placeholder='Amount' name='Amount'/>
<input className='custom-file-upload' multiple type="file" name="DocumentFile" onChange={(e)=> {
setMyFile(e.target.value);
}} />
<button className='btnSubmit'>Submit</button>
</form>
</div>
</div>
);
}
export default App;

Answer 1

I think props drilling should solve it.
example
Login Component
function Login({email, setEmail}){
// you need to update state email here
}
Home or App.js
function App(){
const [email, setEmail] = useState("");
// here you should pass the props to login component,
// so you have the ability to set or asign the email state
<Login email={email} setEmail={setEmail} />
}

Answer 2

If you want to send data tp one page, you can use state with navigate.
navigate("/home", {state: { email: emailLog }})
you can get data from your home component like,
{props.location.state.email}