How to resolve Edge error `SCRIPT1028: Expected identifier, string or number` pointing to an SVG

There are answers to many similar questions, but I don't what to do in my case because here the root of this error is all the SVGs that I import in React Components.

The page loads blank showing this in the console-

SCRIPT1028: Expected identifier, string or number -main.chunk.js

The error points to this line in main.chunk.js- https://i.stack.imgur.com/oq8Kz.png

As I found upon searching for the error, this error occurs due to Edge not supporting ES6 Spread operator. And one of the solutions I understood was to transpile that code using babel, but how about the SVG?

This is the code for the first SVG due to which the error occurs-

import {ReactComponent as BgDots} from "../../images/bg-dots.svg";

export function Card(props) {
  return (
    <div key={props.id} className={props.id}>
      
      {/* <----- ERROR LINE ------> */}
      <BgDots className="bg-dots" />
    
    </div>
)}

This is the codesandbox of my project. Please help me fix this error!