Svgr not working properly in nextJs 13.4.19

Question

I am using svgr webpack (8.1.0) in next13.4.19. I am trying to render image by using next/image component. I am getting image url through api and that image is stored on cloud based storage. When I get png image url it works fine but for svg images it is breaking image.

I have installed @svgr/webpack": "8.1.0 and here is my next.config.js file which is changed according to documentation of svgr

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
      {
        protocol: 'http',
        hostname: '**',
      },
    ],
  },
  webpack(config) {
    config.resolve.alias.canvas = false;
    config.resolve.alias.encoding = false;
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.(".svg")
    );

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ["@svgr/webpack"],
      }
    );

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },
};

module.exports = nextConfig;

Here is code of image component

<Image src={iconUrl} alt="icon" width={24} height={24} />

If I give url of svg image that is in public folder it works properly. For example <Image src={"/images/logo.svg"} alt="icon" width={24} height={24} />

Plus, I have also verified svgs url coming from api and those svgs are also correct and I can open in my browser using same link.