Error de almacenamiento de base de fuego no detectado en Promise para reaccionar usando base de fuego en ProfileImage.js

Este es el código de ProfileImage.js. Realmente necesito ayuda.

 import React, { useRef, useState, useEffect } from 'react'; import { uploadImage, getDownloadUrl } from './firebase/user'; export const ProfileImage = ({ id }) => { const fileInput = useRef(null); const [imageUrl, setImageUrl] = useState(''); useEffect(() => { getDownloadUrl(id).then((url) => !!url && setImageUrl(url)); }, [id]); const fileChange = async (files) => { const ref = await uploadImage(id, files[0]); const downloadUrl = await ref.getDownloadURL(); setImageUrl(downloadUrl); }; return ( <div className="four wide column profile-image"> <img className="ui image" src={imageUrl || '/profile-placeholder.png'} alt="profile" /> <input className="file-input" type="file" accept=".png,.jpg" ref={fileInput} onChange={(e) => fileChange(e.target.files)} /> <button className="ui grey button upload-button" onClick={() => fileInput.current.click()} > Upload Photo </button> </div> ); };

Reglas de almacenamiento en la nube de firebase con la versión de firebase @ 7.15.0 para la carga de imágenes en el almacenamiento de firebase con reglas de almacenamiento en la nube de firebase

 rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /users/{userId}/{fileName} { allow read: if request.auth.uid == userId; allow write: if request.auth.uid == userId && request.resource.size < 5 * 1024 * 1024 && request.resource.contentType.matches('image/.*'); } } }