TypeError setEmail is not a function

Trying to create sign in and sign up with react and firebase and got the error setEmail is not a function when trying to fill the input for the email, if i try to fill the input for password, i get the same error but for setPassword setPassword is not a function App.js

Here is my app.js

import React, {useState, useEffect} from 'react';
import './App.css';
import './Components/Feed/styles/_properties.scss'
import Home from './Pages';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import SignInPage from './Pages/signin';
import SignUpPage from './Pages/signup';
import Feed from './Pages/feed';
import fire from './fire';

function App() {
  
      const [user, setUser] = useState('');
      const [email, setEmail] = useState('');
      const [ password, setPassword] = useState('');
      const [emailError, setEmailError] = useState('');
      const [passwordError, setPasswordError] = useState('');
      const [hasAccount, setHasAccount] = useState('');
      
      const clearInputs = () => {
          setEmail('')
          setPassword('');
      }
      
  
      const clearErrors = () => {
          setEmailError('');
          setPasswordError('');
      }
  
      const handleLogin = () => {
          clearErrors();
          fire
          .auth()
          .signInWithEmailAndPassword(email,password)
          .catch(err => {
              switch(err.code){
                  case 'auth/Invalid-email':
                  case 'auth/user-disabled':
                  case 'auth/user-not-found':
                      setEmailError(err.message);
                      break;
                  case 'auth/wrong-password':
                      setPasswordError(err.message);
                      break;
  
              }
          });
  
      };
  
      const handleSignUp = () => {
          clearErrors();
          fire
          .auth()
          .createuserWithEmailAndPassword(email,password)
          .catch(err => {
              switch(err.code){
                  case 'auth/email-already-In-use':
                  case 'auth/invalid-email':
                      setEmailError(err.message);
                      break;
                  case 'auth/weak-password':
                      setPasswordError(err.message);
                      break;
  
              };
          });
  
  
      };
  
      const handleLogout = () => {
          fire.auth().signOut();
      };
  
      const authListener = () => {
          fire.auth().onAuthStateChanged(user =>{
              if(user){
                  clearInputs();
                  setUser(user);
              }else{
                  setUser('')
              };
          });
      };
      useEffect(() => {
          authListener();
  
      }, []);
  
      
  
  



  return (
    <Router>
      <Switch>
        {user ? (
          <Home handleLogout={handleLogin}/>

        ):(
          <SignInPage email={email}
           setEmail={setEmail}
           emailError ={emailError}
           setEmailError ={setEmailError}
            password={password}
             setPassword={setPassword}
              handleLogin={handleLogin}
               handleSignUp={handleSignUp}
                hasAccount={hasAccount}
                 setHasAccount={setHasAccount}
                  passwordError={passwordError}/>

        )}
        
        
        <Route path='/signup' component={SignUpPage} exact />
        <Route path = '/feed' component={Feed} exact />
        

      </Switch>
    </Router>
   
  );
}

export default App;

And here is my Signin.js

import React from 'react';
import './SigninElements.css'
const SignIn = (props) => {
    const {
        email,
        setEmail,
        password,
        setPassword,
        handleSignIn,
        handleSignup,
        hasAccount,
        setHasAccount,
        emailError,
        passwordError
    } = props;
    return (
        <section className='signin'>
            <div className='signinContainer'>
                <label>Username or Email</label>
                <input
                    type='text'
                    outoFocus
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <p className='errorMsg'>{emailError}</p>
                <label>Password</label>
                <input
                    type='password'
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <p className='errorMsg'>{passwordError}</p>
                <div className='btnContainer'>
                    {hasAccount ? (
                        <>
                            <button onClick={handleSignIn}> Sign In</button>
                            <p>  Don't have an account ? <span onclick={() => setHasAccount(!hasAccount)}>Sign up</span></p>
                        </>

                    ) : (
                            <>
                                <button onClick={handleSignup}> Sign In</button>
                                <p> Have an account ? <span onClick={() => setHasAccount(!hasAccount)}>Sign in</span></p>
                            </>

                        )}

                </div>

            </div>

        </section>

    )

}


export default SignIn;

I searched what could be the problem, but I have no idea. I think it could be the way I'm calling the props. I might be wrong lol. I would really appreciate any help.