I'm trying to signup using the firebase - createUserWithEmailAndPassword method, but it returns undefined when I try to log the returned value.

My config file :

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"

const firebaseConfig = {
  apiKey: "xxxxxx",
  authDomain: "xxxxx",
  projectId: "xxxxxx",
  storageBucket: "xxxxxx",
  messagingSenderId: "xxxxxx",
  appId: "xxxxxxx",
}

firebase?.initializeApp(firebaseConfig)

const auth = firebase?.auth()
const firestore = firebase?.firestore()

export { auth, firestore }

My signup file:

import React, { useState } from "react"
import { auth } from "../firebase"



function Signup(props: Props) {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  console.log({ email, password })



  
  async function handleSubmit(e) {
    console.log("clicked")
    e.preventDefault()
    const res = await auth?.createUserWithEmailAndPassword(email, password)
    
    console.log(res) -> gives undefined
    
  }

  return (
    <>
      <div>
        <form onSubmit={(e) => handleSubmit(e)}>
          <input value={email} onChange={(e) => setEmail(e.target.value)} />
          <input value={password} onChange={(e) => setPassword(e.target.value)} />
          <button type='submit'>Submit</button>
        </form>
      </div>
    </>
  )
}

export default Signup

I'm using firebase version - 9.6.5

On the Firebase dashboard, I don't see anything getting logged neither I get any error on the console.

I have already read other such answers the solution is mostly around using the right package version/upgrading, deleting node modules or initializing the config carefully. I believe I'm doing these steps right.

I'm not sure what I'm doing wrong, any help in the right direction would be very helpful. thanks!