Google Firebase user.PhotoURL doesn’t Change After Upload

I’ve been trying to figure out how to update the user photo after uploading it to Google Firebase. The user photo uploads to Firebase, however doesn’t chance after uploading. Only it changes when the page is refreshed.

Is there a way to refresh the user profile photo without refreshing the whole page?

import { useEffect, useState } from "react";
import { useAuth, upload } from "./firebase";

export default function Profile() {
  const currentUser = useAuth();
  const [photo, setPhoto] = useState(null);
  const [loading, setLoading] = useState(false);
  const [photoURL, setPhotoURL] = useState("https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png");

  function handleChange(e) {
    if (e.target.files[0]) {
      setPhoto(e.target.files[0])
    }
  }

  function handleClick() {
    upload(photo, currentUser, setLoading);
  }

  useEffect(() => {
    if (currentUser?.photoURL) {
      setPhotoURL(currentUser.photoURL);
    }
  }, [currentUser])

  return (
    <div className="fields">
      <input type="file" onChange={handleChange} />
      <button disabled={loading || !photo} onClick={handleClick}>Upload</button>
      <img src={photoURL} alt="Avatar" className="avatar" />
    </div>
  );

Code is taken from LogicismX GitHub page.