Typescript can't use animateMotion

Question

Typescript complains when I try to use animateMotion inside a React component.

Property 'animateMotion' does not exist on type 'JSX.IntrinsicElements'.

Property 'mpath' does not exist on type 'JSX.IntrinsicElements'.

Code

import * as React from 'react'

type OrbitProps = {
  duration: number;
  radius: number;
}

export const Orbit: React.FunctionComponent<OrbitProps>= ({duration, radius}) => {
  const cx = 50
  const cy = 50
  return (
      <g>
        <path
          d={`M ${cx}, ${cy}
          m -${radius}, 0
          a ${radius},${radius} 0 1,0 ${radius*2},0
          a ${radius},${radius} 0 1,0 -${radius*2},0`}
          id="ellipse1"
        />
        <circle r="3">
          <animateMotion dur={`${duration}s`} repeatCount="indefinite">
            <mpath xlinkHref="#ellipse1" />
          </animateMotion>
        </circle>
      </g>
  )
}

Answer 1

Edited:

declare namespace JSX { 
  interface IntrinsicElements { 
    "animateMotion": any,
    "mpath": any, 
  } 
}

Source: https://www.typescriptlang.org/docs/handbook/jsx.html