react function prop undefined

iam passing a function from parent component to child component in reactjs but in the child component the function is showing undefined idk whats wrong can anyone help me im providing my snippet here
the onSignin isnot working but onSignup is working

if (!token) {
return (
  <Routes>
    <Route path="/login" element={<Login onSignin={handleLogin} />} /> // this is where im getting error
    <Route path="/signup" element={<Signup onSignup={handleSignup} />} /> // and this is working
    <Route path="/*" element={<Navigate to="/login" />} />
  </Routes>
)};

the childcomp :

function Login({ onSignin }) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');

[the error][1]


  [1]: https://i.sstatic.net/O2Uz3P18.png