How can I use SVG mshpath with JSX?

Question

I have an SVG with conic gradients that I want to use with React. Conic gradients can be displayed using this polyfill http://tavmjong.free.fr/SVG/POLYFILL/MESH/mesh.js

My SVG contains meshpatch and other tags used for the mesh gradient that JSX doesn't recognize. I tried renaming to meshPatch but it still says Property 'meshPatch' does not exist on type 'JSX.IntrinsicElements'.

Is there a way to use meshpatch with JSX to have the mesh gradients?

Edit:

I found I could put something like this on top of my file to avoid JSX complaining:

declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace JSX {
    interface IntrinsicElements {
      meshgradient: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      >;
      meshpatch: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      >;
      meshrow: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      >;
    }
  }
}

Only one thing left that it complains is the x property of meshgradient:

<meshgradient
        id="meshgradient17602"
        x={-24.580414}
        y={399.86325}
        gradientTransform="translate(-196.02 -72.255)"
        gradientUnits="userSpaceOnUse"
        type="bicubic"
      >

It says:

Type '{ children: Element[]; id: string; x: number; y: number; gradientTransform: string; gradientUnits: string; type: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  Property 'x' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.