Getting an undefined fulfilled promise

Question

I tried few things with this function but I keep getting a fulfilled undefined promise.

Here is what I am trying to achieve:

I have a React component that stores an image file in Firebase Storage, on that same function I want to fetch back the image URL so I could set the user object with that url string.

My Component function:

  const uploadImage = ( user:any, imageFile: FileList) => {
      setUserData({
        ...userData,
        imageUrl: uploadUserImage(imageFile[0], user.uid),
      });
      console.log(userData.imageUrl)
  };

The uploadUserImage is a function in my user controller:

export const uploadUserImage = async (image: File, userId: string) => {
  const imageRef = ref(storage, `images/${userId}`);
  uploadBytes(imageRef, image).then((snapshot) => {
     getDownloadURL(snapshot.ref).then((url) => {
      console.log(url);
         url.toString();
    });
  });
};

I'm not sure why, but everything works fine until the return of the URL, I can console.log the URL string, but it returns undefined fulfilled promise on my component.
I tried few things, like giving an implicit return to my uploadUserImage function, and added conversion to a string of the URL (but not sure if it's needed).

I saw online few examples, but they all did it inside the react component where the promise result was set to a state. What am I doing wring here ?