Error in Reactjs Form submission canceled because the form is not connected

Question

I'm making netflix clone using reactjs and firebase.I have login from firebase but when i'm trying to login through app,it is not routing to localhost:3000/profile.It stucks on login screen only

App.js file:

import React, { useEffect } from 'react';
import './App.css';
import HomeScreen from './screens/HomeScreen';
import requests from './Requests';
import {BrowserRouter as Router,Routes,Route}from"react-router-dom";
import LoginScreen from './screens/LoginScreen';
import { auth } from './firebase';
import { useDispatch, useSelector } from 'react-redux';
import { login, logout, selectUser } from './features/userSlice';
import ProfileScreen from './screens/ProfileScreen';


function App() {
  const user = useSelector(selectUser);
  const dispatch = useDispatch();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((userAuth) => {
      if (userAuth) {
        dispatch(
          login({
            uid: userAuth.uid,
            email: userAuth.email,
        }))
      } else {
        dispatch(logout);
      }
    });

    return unsubscribe;
  },[dispatch]);
  
  return (
    <div className="app">
      <Router>
        {!user ? (
          <LoginScreen />
        ): (
           <Routes>
              <Route path='/profile' element={<ProfileScreen />} />
              <Route exact path='/' element={<HomeScreen />} />
           </Routes>
        )}
       
      </Router>
    </div>
  );
}

   

export default App;

SignupScreen.js file

import React, { useRef } from 'react';
import { auth } from '../firebase';
import './SignupScreen.css';


function SignupScreen() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);


  const register = (e) => {
    e.preventDefault();
   
    auth.createUserWithEmailAndPassword(
      emailRef.current.value,
      passwordRef.current.value
    ).then((authUser) => {
        console.log(authUser);
    })
     .catch((error) => {
      alert(error.message);
     });
  };

  const signIn = (e) => {
    e.preventDefault();
    

    auth.signInWithEmailAndPassword(
      emailRef.current.value,
      passwordRef.current.value

    ).then((authUser) => {
      console.log(authUser);
  })
    .catch((error) => {
      alert(error.message);
    });
  };

  return (
    <div className='signupScreen'>
        <form>
            <h1>Sign In</h1>
            <input ref={emailRef} placeholder='email' type='email' autoComplete='off' />
            <input ref={passwordRef} placeholder='password' type='password' autoComplete='off' />
            <button type='submit' onClick={signIn}>Sign In</button>

            <h4>
              <span className="signupScreen__gray">New to Netflix? </span>
              <span className="signupScreen__link" onClick={register}> Sign Up now.</span>
              
            </h4>
        </form>
    </div>
  )
}

export default SignupScreen;

ProfileScreen.js file

import React from 'react';
import { useSelector } from 'react-redux';
import { selectUser } from '../features/userSlice';
import { auth } from '../firebase';
import Nav from '../Nav';
import './ProfileScreen.css';

function ProfileScreen() {
  const user = useSelector(selectUser);
  return (
    <div className='profileScreen'>
        <Nav />
        <div className="profileScreen__body">
          <h1>Edit Profile</h1>
          <div className="profileScreen__info">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Netflix-avatar.png" alt="netflix avatar" />

            <div className="profileScreen__details">
              <h2>{user.email}</h2>
              <div className="profileScreen__plans">
                <button
                  onClick={() => auth.signOut()}
                  className='profileScreen__signOut'>Sign Out</button>
              </div>

            </div>
          </div>
        </div>

    </div>
  )
}

export default ProfileScreen;

ERROR: in console,it is showing

Form submission canceled because the form is not connected