ERROR: @firebase/firestore: Firestore (10.14.0): WebChannelConnection RPC ‘Write’ stream 0x5a330389 transport errored:

Help please.I got the error message while trying to post some data on firestore and recieved the error message that said: 400. That’s an error.Your client has issued a malformed or illegal request. Unknown SID That’s all we know. @firebase/firestore: Firestore (10.14.0): WebChannelConnection RPC ‘Write’ stream 0x5a330389 transport errored. I’m using nextJs with clerk auth this is the code of the problem file.`

"use client";
import React, { useState } from 'react';
import UploadImage from './UploadImage';
import { useUser } from '@clerk/nextjs';
import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";
import UserTag from './UserTag';
import app from '../Shared/firebaseConfig';
import { doc, getFirestore, setDoc } from 'firebase/firestore';
import { useRouter } from 'next/navigation';
import Image from 'next/image';

function Form() {
    const { user } = useUser();
    const [title, setTitle] = useState('');
    const [desc, setDesc] = useState('');
    const [link, setLink] = useState('');
    const [file, setFile] = useState(null);
    const [loading, setLoading] = useState(false);
    const router = useRouter();

    const storage = getStorage(app);
    const db = getFirestore(app);

    const onSave = async () => {
        if (!file || !title || !desc || !link || !user) {
            alert("Please fill in all the fields and upload a file.");
            return;
        }
        setLoading(true);

        try {
            const storageRef = ref(storage, 'pinterest/' + file.name);
            await uploadBytes(storageRef, file);
            console.log("File Uploaded");

            const url = await getDownloadURL(storageRef);
            console.log("Download URL:", url);

            const postData = {
                title,
                desc,
                link,
                image: url,
                userName: user.fullName,
                email: user.emailAddresses[0]?.emailAddress,
                //userImage: user?.profileImageUrl,
                // Use a unique ID for each post
                id: Date.now().toString() // Generate a unique ID
            };

            console.log('Attempting to save postData:', postData);

            // Save the post data to Firestore
            await setDoc(doc(db, 'pinterest-posts', postData.id), postData);
            console.log("Post data saved successfully");

            router.push(`/${user?.emailAddresses[0]?.emailAddress}`);
        } catch (error) {
            console.error("Error during upload or saving post:", error.message);
            alert("Error saving data: " + error.message);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className='bg-white p-16 rounded-2xl'>
            <div className='flex justify-end mb-6'>
                <button onClick={onSave}
                    className='bg-red-500 p-2 text-white font-semibold px-3 rounded-lg'>
                    {loading ? 
                        <Image src="/loading-indicator.png" width={30} height={30} alt='loading' className='animate-spin' />
                        : <span>Save</span>
                    }
                </button>
            </div>
            <div className='grid grid-cols-1 lg:grid-cols-3 gap-10'>
                <UploadImage setFile={setFile} />
                <div className="col-span-2">
                    <div className='w-[100%]'>
                        <input type="text" placeholder='Add your title'
                            onChange={(e) => setTitle(e.target.value)}
                            className='text-[35px] outline-none font-bold w-full border-b-[2px] border-gray-400 placeholder-gray-400' />
                        <h2 className='text-[12px] mb-8 w-full text-gray-400'>
                            The first 40 characters are what usually show up in feeds
                        </h2>
                        <UserTag user={user} />
                        <textarea
                            onChange={(e) => setDesc(e.target.value)}
                            placeholder='Tell everyone what your pin is about'
                            className='outline-none w-full mt-8 pb-4 text-[14px] border-b-[2px] border-gray-400 placeholder-gray-400' />
                        <input type="text"
                            onChange={(e) => setLink(e.target.value)}
                            placeholder='Add a Destination Link'
                            className='outline-none w-full pb-4 mt-[90px] border-b-[2px] border-gray-400 placeholder-gray-400' />
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Form;

Just tell me how to fix or other way to write my code