Uncaught in Promise firebase storage error for react using firebase in ProfileImage.js

This is the ProfileImage.js code i really need help

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>
  );
};

firebase Cloud Storage rules using firebase version @7.15.0 for image upload to firebase storage using firebase cloud storage rules

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/.*');

    } 
  } 
}