Create Collection on Sign Up

I’m trying to allow users to sign up and in doing so create a collection for themselves in firebase/firestore. The function would essentially authenticate AND create a db/reroute them to a homepage. This logic has been started in the “createDatabaseOnSignUp” function below. (or is it a variable?)

I’m getting an error that says “firebase is not defined.”

I’m a self taught coder so maybe I’m missing something very obvious. If anyone can point me in the right direction or knows the correct thing to import I’d be very grateful.

My code looks like this:

import React, { useRef } from "react";
import { useAuth } from "../../context/AuthContext";
import "./SignUp.scss";
import { Link } from "react-router-dom";
import { collection, getDocs, doc, setDoc, getDoc } from "firebase/firestore";
import { db } from "../../firebase-config";

function SignUp() {
  const { signUp, currentUser } = useAuth();
  const emailRef = useRef();
  const passwordRef = useRef();

  // console.log(currentUser.email);

  const createDatabaseOnSignUp = (emailRef, passwordRef, name) => {
    // create firebase database for user
    const user = firebase
      .auth()
      .signUp(emailRef, passwordRef)
      .then((cred) => {
        return;
        db.collection("name").doc(
          cred.user.uid.set({
            emailRef,
            name,
          })
        );
      });
    return { user };
    // sign up with userAuth
    //navigate to homepage

    // console log success
    console.log("Thanks for registering! Make your first label!");
  };

  return (
    <div className="signup">
      <div></div>
      <h1 className="signup__title">Please Sign Up...</h1>
      <div className="signup__section">
        <label className="signup__label">Email</label>
        <input className="signup__input" ref={emailRef} type="email"></input>
      </div>
      <div className="signup__section">
        <label className="signup__label">Password</label>
        <input
          className="signup__input"
          ref={passwordRef}
          type="password"
        ></input>
      </div>
      <div className="signup__section">
        <label className="signup__label">Confirm Password</label>
        <input className="signup__input" type="password"></input>
      </div>
      <button
        className="signup__button"
        onClick={() =>
          signUp(emailRef.current.value, passwordRef.current.value)
        }
      >
        Sign Up
      </button>
      <h3 className="signup__text">
        Already have an account?{" "}
        <Link to="/login" className="signup__underline">
          Log in
        </Link>
      </h3>
    </div>
  );
}

export default SignUp;