Next js <Image/> src problem. image config error

Question

This is my next.config.mjs file. I am creating PWA application using firebase to store images. but when I use <Image/> tag I received below error. how can I fix it?

Error: Invalid src prop (https://firebasestorage.googleapis.com/v0/b/cyberpolaimageupload.appspot.com/o/images%2Fvegitableshop.jpg?alt=media&token=f4e10fa9-a44c-4447-a13a-b218a7ed7241) on 'next/image', hostname "firebasestorage.googleapis.com" is not configured under images in your 'next.config.js' See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

/** @type {import('next').NextConfig} */
const nextConfig = {};

import withPWAInit from "@ducanh2912/next-pwa";


const withPWA = withPWAInit({
    dest: "public",
    cacheOnFrontEndNav: true,
    aggressiveFrontEndNavCaching: true,
    reloadOnOnline: true,
    swcMinify: true,
    disable: false,
    workboxOptions: {
        disableDevLogs: true,
    },
      images: {
        remotePatterns: [
          {
            protocol: 'https',
            hostname: 'firebasestorage.googleapis.com',
            port: '',
            pathname: '/v0/b/cyberpolaimageupload.appspot.com/o/images/',
          },
        ],
      },
});



export default withPWA(nextConfig);