Как использовать Firebase для загрузки изображений в Next.js?

Я просматриваю видеоурок о Nextjs и вижу, что версия Firebase, которую он использует, устарела. Мне удалось выполнить все шаги, прочитав документацию, пока я не дошел до этого момента.

Искал здесь и нашел несколько интересных ответов о том, как добиться возможности загрузки изображений в Firebase. Вот ссылка

Перепробовали все решения, и ни одно из них не сработало. Я получаю сообщение об ошибке:

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Bad Request

Вот код, который я пытаюсь:

import Image from "next/image";
import { useSession } from "next-auth/react";
import { FaceSmileIcon } from "@heroicons/react/24/outline";
import { VideoCameraIcon, PhotoIcon } from "@heroicons/react/20/solid";
import { useRef } from "react";
import { db, storage } from "../firebase";
import { collection, addDoc, serverTimestamp, doc, setDoc } from "firebase/firestore";
import { useState } from "react";
import {ref, uploadString, getDownloadURL, getStorage} from "firebase/storage";

function InputBox() {

    const {data: session} = useSession();
    const inputRef = useRef(null);
    const filePickerRef = useRef(null);
    const [imageToPost, setImageToPost] = useState(null);

    const sendPost = async (e) => {
        e.preventDefault();
        if (!inputRef.current.value) return;

        const colRef = collection(db, "posts")

        await addDoc(colRef, {
            message: inputRef.current.value,
            name: session.user.name,
            email: session.user.email,
            image: session.user.image,
            timestamp: serverTimestamp(),
        }).then((document) => {
            if (imageToPost) {
                const storageRef = ref(storage, `posts/${document.id}`);
                uploadString(storageRef, imageToPost, "data_url").then((snapshot) => {
                    getDownloadURL(snapshot.ref).then(URL => {
                        setDoc(doc(db, "posts", document.id), 
                        {imageToPost: URL}, {merge: true}
                        );
                    });
                })
                removeImage();
            }
        })
        inputRef.current.value = "";
    };

    const addImageToPost = (e) => {
        const reader = new FileReader();
        if (e.target.files[0]) {
            reader.readAsDataURL(e.target.files[0]);
        }

        reader.onload = (readerEvent) => {
            setImageToPost(readerEvent.target.result);
        }
    };

    const removeImage = () => {
        setImageToPost(null);
    };

    return ( <HERE THE REST OF THE CODE>

Не сердись на меня. Я действительно пытался сделать все возможное, чтобы найти решение и не публиковать здесь.

Любая помощь будет очень признательна, потому что я не могу понять, что не так, потому что, как упоминалось ранее, я пробовал все варианты, которые нашел до сих пор.

BTW также пытался назначить хранилище для getStorage() до const storageRef = ref(storage, `posts/${document.id}`);

Вот так:

.then((document) => {
   if (imageToPost) {
      const storage = getStorage();
      const storageRef = ref(storage, `posts/${document.id}`);

<MORE CODE>

И мой firebase.jsфайл:

import { initializeApp } from 'firebase/app';
import { getStorage } from "firebase/storage";

const firebaseConfig = {
    apiKey: "APIKEY-HERE",
    authDomain: "AUTHDOMAIN-HERE",
    projectId: "PROJECT-ID-HERE",
    storageBucket: "STORAGE-BUCKET-HERE",
    messagingSenderId: "MESSAGING-SENDER-HERE",
    appId: "APPID-HERE"
  };


  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);

  const storage = getStorage(app);

  export { db, storage };