Reactjs – how to use props and a user token in one js function?

I am looking for a solution where it is possible to use props and a user token to create a dynamic Dialog window for changing the users meta data (e.g. password).

When I click the button in the profile view

<ChangeRequestDialog changerequest="Password"></ChangeRequestDialog>

It sets the changerequest to password so that the dialog knows that the user would like to change the password and renders the Dialog window accordingly.

export default function ChangeRequestDialog(props, token){
  const [open, setOpen] = React.useState(false);
  
  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };
const handleChange = (event) => {
    setModel(event.target.value);
  };
const pwrecovery = async (e) => {
    let { data, error } = await supabase.auth.resetPasswordForEmail(
      token.user.email
    );
    console.log('pw recovery done')
  };

return (
<React.Fragment>
<Button className="button" variant="contained" onClick={handleClickOpen}>
                      change password
                    </Button>
<Dialog open={open} onClose={handleClose}>
        <DialogTitle>change {props.changerequest}</DialogTitle>
        <DialogContent>
          <DialogContentText>
{ props.changerequest=='Password'
                      ? "Are you sure you want to change you password?"
: ""
                  }
</DialogContentText>
 <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          {
                     props.changerequest=='Password'
                      ? <Button onClick={pwrecovery}>Change</Button>
                      : ""
                  }
        </DialogActions>
</Dialog>
    </React.Fragment>

I am passing the token from App.js to the ChangeRequestDialog.js like this:

function App() {
  const [token, setToken] = useState(false);

  if (token) {
    sessionStorage.setItem("token", JSON.stringify(token));
  }

  useEffect(() => {
    if (sessionStorage.getItem("token")) {
      let data = JSON.parse(sessionStorage.getItem("token"));
      setToken(data);
    }
  }, []);
return (
<BrowserRouter>
<Routes>
<Route path="/profile" element={<Profile token={token} />} />
<Route path="/ChangeRequestDialog" element={<ChangeRequestDialog token={token} />} />
</Routes>
</BrowserRouter>
  );
}

export default App;

everything worked out fine so far except from the pwrecovery function as it drops the error "Cannot read properties of undefined (reading ’email’)" I suppose this error occures because I do not pass on the token correctly I have tried:

export default function ChangeRequestDialog(props, {token}){

The result is that the function stops one instance earlier and the error says: "Cannot read properties of undefined (reading ‘user’)"
On other pages I do it like that and it works perfectly fine:

const Profile = ({ token }) => {
};
export default Profile;

The Token is set when the user logs in
App.js:

<Route path="/login" element={<Login setToken={setToken} />} />

Login.jsx:

const Login=({setToken}) =>{
...
async function handleSubmit(e){
    e.preventDefault()

    try{
      const {data, error} = await supabase.auth.signInWithPassword(
        {
          email: formData.email,
          password: formData.password,
        }
        )

      if (error) throw error
      console.log(data)
      setToken(data)
      navigate('/profile')
    }
      catch(error){
        alert(error)
      }
}
return(...)}

but I guess because of the function the synthax is different. Would love to get an answer thank you in advance!