I've got a bunch of svgs coming from an api response, which I get inside useEffect. Response looks like this

{svg1: 'https://remoteserver.com/assests/svg1.svg', ...and so on}

( These svgs aren't static coming from /public folder. So I don't import them at top.) I want to render them in nextjs using next/image or normal <img> tag, passing the url into src. I know that next.js by default don't support svgs.

 <Image alt='SVG from api'
        src={response.svg1}
        width={'45px'}
        height={'45px'}
        objectFit='contain' />

According to docs, this is possible with dangerouslyAllowSVG, but there is security risk here, so I don't want to go this route. I know packages like SVGR and babel-inline-svg are there to solve the issue, but they are for using svgs as react components. I've also tried next-images and made use of withImages inside next.config.js.

const withImages = require('next-images')
module.exports = withImages({
     reactStrictMode: true,
     env: {
        BASE_URL: process.env.BASE_URL
        },
     images: {
      domains: ['remoteserver.com', 'remoteserver2.com']
      },
  webpack(config, options) {
    return config
  }
})

But the build is failing when I try next build.

./static/images/Logo.png
TypeError: unsupported file type: undefined (file: undefined)

What am I missing/doing wrong here ? Are there any alternate solutions ?