Carga de archivos desde un sitio web a Firebase Storage utilizando Firebase v9.

Tengo en mi sitio una página donde manejo la carga de archivos, pero desde que actualicé Firebase (supongo que era Firebase v7/8), esta característica en particular ya no funciona.

Para manejar la carga de archivos en el almacenamiento de Firebase, creé un hook personalizado, donde utilizo useEffect porque necesito que se ejecute cada vez que hay un nuevo valor de archivo. Pasé un parámetro (file) para el archivo que estoy tratando de cargar y almacenarlo en la base de datos, de esta manera la base de datos contiene todas las URL de las imágenes. Luego utilicé esos datos para cargar imágenes en componentes de React.

El error que tengo es:

Uncaught TypeError: projectStorage.ref no es una función

Dado que estoy en Firebase v9, estoy un poco confundido al respecto y no sé qué cambiar. Gracias por tu ayuda, realmente lo aprecio =).

useStorage.jsx (hook personalizado)

import { projectStorage, projectFirestore, timestamp } from '../Firebase';
import { useEffect, useState } from 'react';

function useStorage(file) {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);

    useEffect(() => {
        const storageRef = projectStorage.ref(file.name);
        const collectionRef = projectFirestore.collection('images');

        storageRef.put(file).on('state_changed', (snap) => {
            let percent = (snap.bytesTransferred / snap.totalBytes) * 100;
            setProgress(percent >> 0); // or Math.trunc() 
        }, (err) => {
            setError(err);
        }, async () => {
            const url = await storageRef.getDownloadURL();
            const createdAt = timestamp();
            collectionRef.add({ url, createdAt });
            setUrl(url);
        });
    }, [file]);

    return { progress, url, error };
}

export default useStorage;