How can I change Facebook login to e-mail authentication with firebase?

I tried to do change facebook login to e-mail authentication, but I couldn't. There was some errors. Because I haven't used facebook login in firebase before and I have no idea how I can change this code. I spoke to the owner of the code, and he didn't know much about firebase e-mail authentication. I would appreciate it if someone could help with this.

auth/LoginFb.js

import React, { useContext, useEffect } from "react";
import FacebookLogin from "react-facebook-login";
import { Facebook } from "@mui/icons-material";
import { db } from "../../firebase-config";
import { doc, getDoc, setDoc } from "firebase/firestore";
import userContext from "../../context/userContext";
import { useNavigate } from "react-router-dom";
export default function LoginFb() {
  const user_context = useContext(userContext);

  const { setUser, user } = user_context;

  // navigate after successfull login or navigate if user is already loggedin
  const navigate = useNavigate();

  const responseFacebook = async (response) => {
    const docRef = doc(db, "users", response.email);
    const docSnap = await getDoc(docRef);

    if (docSnap._document === null) {
      // Add a new document in collection "users"
      await setDoc(doc(db, "users", response.email), {
        name: response.name,
        email: response.email,
        method: "fb",
        pic: response.picture.data.url,
      });
      navigate("/");
    } else {
      localStorage.setItem("blog-user", JSON.stringify(docSnap.data()));
      setUser(docSnap.data());
      navigate("/");
    }
  };

  useEffect(() => {
    if (localStorage.getItem("blog-user") !== null || user !== null) {
      navigate("/");
    }
    // eslint-disable-next-line
  }, []);

  return (
    <FacebookLogin
      appId={process.env.REACT_APP_FB_APP_ID}
      fields="name,email,picture"
      callback={responseFacebook}
      cssClass="login-with-fb"
      icon={<Facebook />}
    />
  );
}

pages/Auth.js

import React, { useContext, useRef } from "react";
import "../AuthForm.css";
import modeContext from "../context/modeContext";

import LoginFb from "../components/auth/LoginFb";

export default function Register() {
  const mode_context = useContext(modeContext);

  const { mode } = mode_context;

  // use the following ref to make the container active according to the button clicked
  const ref = useRef();

  // handle when clicked on signup click
  const handleSignUpClick = () => {
    ref.current.classList.add("right-panel-active");
  };
  // handle when clicked on sign in button
  const handleSignInClick = () => {
    ref.current.classList.remove("right-panel-active");
  };

  // changing document title
  document.title = "Authentication";

  return (
    <div className="login-reg">
      <div className="container" id="container" ref={ref}>
        <div className="form-container sign-up-container">
          <form action="#">
            <h1>Create Account</h1>
            <div className="social-container">
              <LoginFb />
            </div>
          </form>
        </div>
        <div className="form-container sign-in-container">
          <form action="">
            <h1>Sign in</h1>
            <div className="social-container">
              <LoginFb />
            </div>
          </form>
        </div>
        <div className="overlay-container">
          <div
            className="overlay"
            style={{ backgroundColor: mode === "dark" ? "#1a1a1a" : "#242424" }}
          >
            <div className="overlay-panel overlay-left">
              <h1>Welcome Back!</h1>
              <p>
                To keep connected with us please login with your personal info
              </p>
              <button
                className="ghost"
                id="signIn"
                onClick={() => handleSignInClick()}
              >
                Sign In
              </button>
            </div>
            <div className="overlay-panel overlay-right">
              <h1>Hello, Friend!</h1>
              <p>Enter your personal details and start blogging</p>
              <button
                className="ghost"
                id="signUp"
                onClick={() => handleSignUpClick()}
              >
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}