react firebase recoil protected route authentication error, Cannot delete property '1' of [object Array]

Question

the error I'm getting is, Cannot delete property '1' of [object Array] TypeError: Cannot delete property '1' of [object Array] at ObserverProxy.unsubscribeOne (http://localhost:3000/static/js/bundle.js:40212:27) at http://localhost:3000/static/js/bundle.js:4866:9 at http://localhost:3000/static/js/bundle.js:636:7 at safelyCallDestroy (http://localhost:3000/static/js/bundle.js:71542:9) at commitHookEffectListUnmount (http://localhost:3000/static/js/bundle.js:71680:15) at commitPassiveUnmountInsideDeletedTreeOnFiber (http://localhost:3000/static/js/bundle.js:73361:15) at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (http://localhost:3000/static/js/bundle.js:73317:9) at commitPassiveUnmountEffects_begin (http://localhost:3000/static/js/bundle.js:73239:15) at commitPassiveUnmountEffects (http://localhost:3000/static/js/bundle.js:73227:7) at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:75050:7)

and

TypeError { stack: 'TypeError: Cannot assign to read only property '_canInitEmulator' of object '#'\n' + ' at _performFetchWithErrorHandling (http://localhost:3000/static/js/bundle.js:2967:25)\n' + ' at _performApiRequest (http://localhost:3000/static/js/bundle.js:2939:10)\n' + ' at getAccountInfo (http://localhost:3000/static/js/bundle.js:3105:10)\n' + ' at _reloadWithoutSaving (http://localhost:3000/static/js/bundle.js:3412:53)\n' + ' at async UserImpl._fromIdTokenResponse (http://localhost:3000/static/js/bundle.js:3862:5)\n' + ' at async UserCredentialImpl._fromIdTokenResponse (http://localhost:3000/static/js/bundle.js:7084:18)\n' + ' at async _signInWithCredential (http://localhost:3000/static/js/bundle.js:7346:26)', message: 'Cannot assign to read only property '_canInitEmulator' of object '#'' }

and code is,

App.jsx

import "./App.css";
import { Route, Routes } from "react-router-dom";
import Wrapper from "./components/layouts/Wrapper";
import Home from "./pages/Home";
import AddArticle from "./pages/AddArticle";
import ShowArticles from "./pages/ShowArticles";
import ArticleLayout from "./components/ArticleLayout";
import SignUpIn from "./pages/SignUpIn";
import RouteProtector from "./components/RouteProtector";

function App() {
  return (
    <div className="App">
      <Wrapper>
        <Routes>
          <Route path="/" element={<ArticleLayout />}>
            <Route index element={<Home />} />
            <Route path=":articlename" element={<ShowArticles />} />
          </Route>
          <Route
            exact
            path="add-article"
            element={
              <RouteProtector>
                <AddArticle />
              </RouteProtector>
            }
          />
          <Route exact path="sign-up-in" element={<SignUpIn />} />
        </Routes>
      </Wrapper>
    </div>
  );
}

export default App;

SignUp.jsx

import React, { useState } from "react";
import { Navigate } from "react-router-dom";
import { auth } from "../services/firebase";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";
import "./SignUp.css";
import userState from "../states/user";
import { useRecoilState } from "recoil";
import { useNavigate } from "react-router-dom";
const SignUp = ({ signIn }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useRecoilState(userState);
  const [signInState, setSignInState] = useState(signIn);
  const navigate = useNavigate();
  const signUpOrIN = () => {
    try {
      if (signInState) {
        signInWithEmailAndPassword(auth, email, password)
          .then((user) => setUser(user))
          .catch((e) => console.log(e));
        navigate("/add-article");
      } else {
        createUserWithEmailAndPassword(auth, email, password)
          .then((r) => setSignInState(true))
          .catch((e) => console.log(e));
      }
      setEmail("");
      setPassword("");
    } catch (e) {
      console.log("error is", e);
    }
  };
  console.log(JSON.stringify(user));
  if (!Object.keys(user).length) {
    return (
      <div className="SignUp">
        <div className="sign-up-form">
          <h3>Please Sign{signInState ? "In" : "Up"} </h3>
          <input
            type="email"
            placeholder="enter your email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="email"
          />
          <br />
          <input
            type="password"
            placeholder="enter password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="password"
          />

          <button className="sign-up" onClick={() => signUpOrIN()}>
            {signInState ? "SignIn" : "SignUp"}
          </button>
        </div>
      </div>
    );
  } else return <Navigate to="/" replace />;
};

export default SignUp;

RouteProtector.jsx

import React, { useEffect } from "react";
import userState from "../states/user";
import SignUpIn from "../pages/SignUpIn";
import { onAuthStateChanged } from "firebase/auth";
import { useRecoilState } from "recoil";
import { auth } from "../services/firebase";
const RouteProtector = ({ children }) => {
  const [userDetails, setUserDetails] = useRecoilState(userState);

  useEffect(() => {
    const listen = onAuthStateChanged(auth, (data) => {
      if (data) {
        setUserDetails(data);
      } else {
        setUserDetails({});
      }
    });
    return () => {
      listen();
    };
  }, []);
  return (
    <div>
      {Object.keys(userDetails).length ? children : <SignUpIn signIn={true} />}
    </div>
  );
};

export default RouteProtector;

My recoil user state is,

user.js

import { atom } from "recoil";
const userState = atom({
  key: "userState",
  default: {},
});
export default userState;

Index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { RecoilRoot } from "recoil";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>
);
reportWebVitals();