In my App.js

componentDidMount() {
this.authListerner = auth.onAuthStateChanged(async userAuth => {
 if (userAuth){
   const userRef = await handleUserProfile(userAuth);
    userRef.onSnapshot(snapshot => {
     this.setState({
       currentUser: {
         id: snapshot.id,
         ...snapshot.data(),
       }
     })
   })
 }
  
 this.setState({
   ...initialState
 });
});
}

My utilis.js

export const handleUserProfile = async ({userAuth, additionalData = {}})
=> {
if (!userAuth) {
console.warn("No userAuth provided!");
return;
}
const { uid } = userAuth;
const userRef = doc(collection(firestore, `users/${uid}`));
const snapshot = await userRef.get();
if (!snapshot.exists) {
const { displayName, email } = userAuth;
const timestamp = new Date();
try {
  await userRef.setDoc(firestore, {
    displayName,
    email,
    createdDate: timestamp,
    ...additionalData,
  })
} catch(err) {
  console.warn(err);
}
}
return userRef;
};

Can anyone help me with this. I cant get it to run. I am using firebase web version 9. which I trying to use a simple from version 8