So, I've been googling around like a crazy man and read docs but... somehow I don't get it working. I have an image stored in my firebase storage as mocked up, my <Image> code:

            {blog.imageUrl && (
                <div className="pb-[56.25%] w-full relative">
                    <Image
                        src={blog.imageUrl}
                        alt={blog.title}
                        sizes="(max-width: 768px) 100vw, 33vw"
                        fill="true"
                        style={{ objectFit: "cover" }}
                    />
                </div>
            )}

This works perfectly fine locally, but when I deploy and in production mode it gets 404 error. The url is: https://firebasestorage.googleapis.com/v0/b/web-blogapp.appspot.com/o/cutedog.jfif?alt=media but error says GET 404 not found with link:
https://web-blogapp.web.app/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fweb-blogapp.appspot.com%2Fo%2Fcutedog.jfif%3Falt%3Dmedia&w=640&q=75

my next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
              protocol: 'https',
              hostname: 'firebasestorage.googleapis.com',
              port: '',
            },
          ],
    },
};

export default nextConfig;

If I replace nextjs inbuilt Image to regular <img> it works. Any idea why this occurs?