How should I pass data from react app.js to profile.js and set id in url?

Question

Edited the post!!!

id coming trough login request, at the else branch at handleChangeId! it gets the correct id! i try to push at the top!

export function Login({handleChangeId}) {

const login = () => {

//node port egyezés szükséges
Axios.post('http://localhost:3001/login', {

    LoginUsername: usernameLog,
    LoginPassword: passwordLog,
}).then((response) => { 

    if (response.data.message) {
        setLoginCorrect(response.data.message)
    }

    else {
        handleChangeId(response.data[0].id);
        navigate("/App");
    }
});
};
}

than at App.js i try to get the id from the login Route, and push trough profile Route

let id = null;

function changeID(newId) {
  id= newId;
}

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route exact path="/" element={<Login handleChangeId={changeID} />}
      <Route exact path="/profile" element={<Profile id={id} />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
); />

at Profile.js, i also try to get the id this way, but the value=null every way that i tried! And this is what im looking for - how to read and set the id and get their personal datas, when the users hit profile on the menubar!

export function Profile({ id }) {

    const [customers, setCustomers] = useState([]);

    useEffect(() => {
        Axios.get(`http://localhost:3001/profile?userId=${id}`)
            .then((response) => {
                if (response) {

                    setCustomers(response.data);
                }
                else {
                    alert("Data currently unavailable!")
                }
            });
    }, []);
}