SyntaxError: unknown: Default namespace tags are not supported. React JSX does not support namespace tags. can you turn it on?

Question

React

I am getting the following error when trying to load svg as ReactComponent.
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.

import React from "react";
import { ReactComponent as LO } from "../a/Logo.svg"
import { NavLink } from "react-router-dom";

const Logo = () => (
  <>
    <NavLink to={"/"}>
     <LO width={"40px"} height={"40px"} />
    </NavLink>
  </>
);

export default Logo;

SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.

Answer 1

Give the code of the svg.
follow the JSX syntax

stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"

etc.
but not

stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"

etc.