So I made an Avatar Chooser and now I'm getting this error if I Select an image.

It should also display the image in the avatar, but it's just trowing me the error instead.

How can I solve this and manage it to display the image in the Avatar Icon ?

My code:

async function handleFileInputChange(e) {
    const files = e.target.files;
    const file = files[0];

    const storage = firebase.storage();
    const usersImageRef = storage
      .ref()
      .child(`users/${user.uid}/profilepicture.jpg`);

    const snap = await usersImageRef.put(file);

    const donwloadURL = await snap.ref.getDownloadURL();
    setDownloadURL(donwloadURL);

    await firebase.auth().updateProfile({ photoURL: donwloadURL });
  }

 <input
          accept="image/*"
          className={classes.input}
          id="contained-button-file"
          multiple
          type="file"
          onChange={handleFileInputChange}
        />
        <label>
          <IconButton>
            <Avatar
              src="../assets/ana.png"
              style={{
                margin: "10px",
                width: "60px",
                height: "60px",
              }}
            />
          </IconButton>
        </label>

The error :

This is what it looks like :