How to get currentUser data from firestore using react

I've created a simple signup / authentication system and I would like to retrieve the logged in user's details (name, bio, email, imgURL) from my firestore collection, however I've had no luck outside of "undefined" and "null" for the values listed above.

The actual collection does populate with an email, uid, name, bio, imgURL upon signup and I've tried a variety of methods to get the data and display but I feel like I've reached a dead end. I am new to using firebase and am a bit rusty with react so any and all help is appreacited!

continueSignUp.jsx -> sets the user provided inputs in firestore

const ContinueSignUp = () => {
  const [file, setFile] = useState();
  const [url, setURL] = useState();
  const [name, setName] = useState('');
  const [bio, setBio] = useState('');

  let user = firebase.auth().currentUser;
  let uid = user.uid;
  let email = user.email;
  
  const hidePlaceholder = url ? { display: "none" } : {};
  const navigate = useNavigate();

  function handleChange(e) {
    if (e.target.files && e.target.files[0]) setFile(e.target.files[0]);
    setURL(URL.createObjectURL(e.target.files[0]));
  }

  async function handleUpload(e) {
    e.preventDefault();
    const path = `/images/${file.name}`;
    const ref = storage.ref(path);
    await ref.put(file);
    const url = await ref.getDownloadURL();
    setURL(url);
    setFile(null);
    console.log(file);

    if (name === "") {
      return;
    }
    const userRef = collection(db, "users");
    addDoc(userRef, { name, bio, url, uid, email })
      .then((response) => {
        console.log(response);
        navigate("/portfolio")
      })
      .catch((error) => console.log(error.message));
  }

portfolio.jsx -> Gets and displays the inputs

const Portfolio = () => {
  const uid = firebase.auth().currentUser.uid;
  const currentUserProfile = firebase.firestore().collection("users").doc(uid);
  
  useEffect(() => {
    currentUserProfile.get().then((doc) => {
     const userName = doc.data().bio;
      console.log(uid);
    }).catch((err) => {console.log("Error in displaying Name!")})
  }, []);

*actual Document IDs have been replaced by zeros

Ive also tried onAuthStateChanged(()) => {} but no avail there either

*If you find any other mistakes or opportunities for optimization, please let me know, I take no offense lol

Again thank you for any help you can give ~~

Here is one of methods I have tried, this gets the entire collection of data of all the users, however, I want to get the data of only the user that is currently logged in.

const [profile, setProfile] = useState(null);

  useEffect(() => {
    getUserData();
  }, []);

  useEffect(() => {
    console.log(profile);
  }, [profile]);

  function getUserData() {
    const userRef = collection(db, "users");
    getDocs(userRef)
      .then((response) => {
        const user = response.docs.map((doc) => ({
          data: doc.data(),
          id: doc.id,
        }));
        console.log(response);
        setProfile(user);
      })
      .catch((error) => console.log(error.message));
  }

console.log(profile) :

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {data: {…}, id: '00000000000000000000'}
1: {data: {…}, id: '00000000000000000000'}
2: {data: {…}, id: '00000000000000000000'}
3: {data: {…}, id: '00000000000000000000'}
4: {data: {…}, id: '00000000000000000000'}
5: {data: {…}, id: '00000000000000000000'}
6: {data: {…}, id: '00000000000000000000'}
7: {data: {…}, id: '00000000000000000000'}
8: {data: {…}, id: '00000000000000000000'}

I ended up scrapping all I had and working backwards to figure out a solution and here's what I got

ContinueSignUp.jsx

        // Add a new document in collection "users"
        await setDoc(doc(db, "users", auth.currentUser.uid ), {
          name: name,
          bio: bio
        });

This is actually setting the uid as the DocID now and making x1000 times easier to retrieve!

Also used the answer here to help display the user's data from firestore.