React can't recognize firebase/auth or #firebase/auth - reactjs

Question

I am having an issue that I can't figure out the solution, I built this page a while ago, and now I need to add an authentication section, I already had the firebase installed because of the deployment, so I as I wrote the code most of the methods wouldn't be recognized or appear. I tried to look for solutions, used firebase/compat/auth
but nothing. This is the code I have
the Firebase config file:
import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "xxxx",
authDomain: "xxx",
projectId: "xxx",
storageBucket: "xxxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxxx"
};;
const firebaseApp=firebase.initializeApp(firebaseConfig);
const db=firebase.firestore();
const auth = firebase.auth(firebaseApp);
export { auth }
export default db;
The implementation
import React, { useState } from 'react'
import {auth} from '../../firebase.config.js'
import {onAuthStateChanged,signInWithEmailAndPassword,signOut} from "firebase/auth"
function AppAuthentication(){
const [loginEmail,setLoginEmail] = useState("");
const [loginEmailPass, setLoginEmailPass] = useState("");
const [user,setUser] = useState({});
const login = async () => {
try{
const user = await signInWithEmailAndPassword(auth,loginEmail,loginEmailPass);
console.log(user)
}catch(error){
console.log(error)
}
}
const logout = async () => {
await signOut(auth)
}
return(
<>
<div>
<h3> Login</h3>
<br></br>
<input placeholder='Your email'
onChange={(event)=>{
setLoginEmail(event.target.value);
}}
/>
<br></br>
<input placeholder='Your Password'
onChange={(event)=>{
setLoginEmailPass(event.target.value)
}}
/>
<br></br>
<button onClick={login}>Login</button>
<br></br>
<h4>User:</h4>
<br></br>
<button onClick={logout}>Sign Out</button>
</div>
</>
)
}
export default AppAuthentication;
The Error message I get is:
Module '"firebase/auth"' has no exported member 'onAuthStateChanged'.
Module '"firebase/auth"' has no exported member 'signOut'.
This is the package.json
"dependencies": {
"#craco/craco": "^6.2.0",
"#firebase/auth": "^0.20.7",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/jest": "^26.0.24",
"#types/node": "^12.20.19",
"#types/react": "^17.0.18",
"#types/react-dom": "^17.0.9",
"firebase": "^8.10.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropdown": "^1.9.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.3.5",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"deploy:firebase": "npm run build && firebase deploy"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-router-dom": "^5.1.8",
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7"
}
}
Thanks in advance for thee help. my Firebase version in 8.10.1