I am making a multi-page Online Store web application and I currently stuck on how I pass the user’s input (username) into the welcome message that will show up after logging in such as “weclome back {username}” I am new to react.js so I am trying to keep it simple so I tried to useLocation but it was unsuccessful I was wondering I needed to rewrite my coded or i was thinking to use props? please help??

app.js

// import react router dom and components //
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Products from "./components/Products";
import About from "./components/About";
import LoginPage from "./components/LoginPage";
import NavMenu from "./components/NavMenu";
import "./App.css";

// Create the App component //
function App() {
  return (
    <div className="App">
      <header className="App-header"></header>
      <NavMenu />

      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/Products" element={<Products />} />
        <Route path="/About" element={<About />} />
        <Route path="/LoginPage" element={<LoginPage />} />
      </Routes>
    </div>
  );
}

export default App;

home.js

// import react, useState and useNavigate hooks //
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

// create Home component //
export default function Home() {
  // Create login state variables //
  const [login, setLogin] = useState("");
  const navigate = useNavigate();

  function loginBtn() {
    if (!login) {
      alert("please enter user login");
      return;
    }
  }

  function handleClick() {
    if (!login) {
      alert("please enter user login");
      return;
    }
    loginBtn();
  }

  return (
    <div>
      <header>
        <h1>Welcome to the Homepage</h1>
        <div>
          <label>
            Name:
            {/* Input field for user's login */}
            <input
              type="text"
              defaultValue={login}
              placeholder="Enter Login here"
              onChange={(e) => setLogin(e.target.value)}
            />
            {/* login button to execute useNavigate function */}
            <button
              onClick={() => {
                handleClick();
                navigate("/LoginPage", { state: { login: "" } }); {/* attempt to pass username */}
              }}
            >
              Login
            </button>
          </label>
        </div>
      </header>
    </div>
  );
}

loginPage.js

// import react and useNavigate
import React from "react";
import { useNavigate, useLocation } from "react-router-dom";

export default function LoginPage() {
  const navigate = useNavigate();
  const location = useLocation();

  //   function login() {
  //     props.setUsername(props.username);
  //   }
  return (
    <div>
      <header>
        <h1>Welcome {location.state.login} !</h1>
        <div>
          {/* logout button to execute useNavigate function */}
          <button onClick={() => navigate(-1)}>Logout</button>
        </div>
      </header>
    </div>
  );
}