Реагируйте TypeScript: свойство 'class' не существует для типа 'SVGProps <SVGSVGElement>

Question

Я хочу анимировать SVG, но как только я добавляю код SVG в компонент реагирования, я получаю ошибку

Type '{ children: Element; class: string; viewBox: string; xmlns: string; }' is not assignable to type 'SVGProps<SVGSVGElement>'.
  Property 'class' does not exist on type 'SVGProps<SVGSVGElement>'.ts(2322)

, а затем

Type '{ children: Element[]; class: string; }' is not assignable to type 'SVGProps<SVGGElement>'.
  Property 'class' does not exist on type 'SVGProps<SVGGElement>'.ts(2322)

и далее

Type '{ class: string; cx: string; cy: string; r: string; }' is not assignable to type 'SVGProps<SVGCircleElement>'.
  Property 'class' does not exist on type 'SVGProps<SVGCircleElement>'.ts(2322)

Код SVG, который я пытаюсь использовать, находится внизу этого блока кода ...

import React, { useContext, useEffect, useState } from 'react';
import { ObjectInterface, XYInterface } from '../../components/interfaces';
import { Dispatch, DRAW, Global } from '../../globalState';

interface PropsInterface {
  selected: ObjectInterface;
}

const TimerInspector: React.FC<PropsInterface> = (props: PropsInterface) => {
  const { global } = useContext(Global);
  const { dispatch } = useContext(Dispatch);
  const [position, setPosition] = useState<XYInterface>({ x: 0, y: 0 });
  const [size, setSize] = useState<XYInterface>({ x: 50, y: 50 });
  const [seconds, setSeconds] = useState<number>(4);
  const [start, setStart] = useState<boolean>(false);

  const draw = () => {
    dispatch({ type: DRAW, value: Date.now() });
  };

  const slider = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSeconds(+event.currentTarget.value);
  };

  const changePosition = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.id === 'x') {
      setPosition({ x: +event.target.value, y: position.y });
      if (props.selected) {
        props.selected.position = { x: +event.target.value, y: position.y };
      }
    } else {
      setPosition({ x: position.x, y: +event.target.value });
      if (props.selected) {
        props.selected.position = { x: position.x, y: +event.target.value };
      }
    }
    draw();
  };

  const changeSeconds = (event: React.ChangeEvent<HTMLInputElement>) => {
    let value = +event.currentTarget.value;
    if (value > 240) value = 240;
    if (value < 1) value = 1;
    setSeconds(+value);
  };

  const toggleStart = () => {
    setStart(!start);
  };

  const test = () => {
    console.log('fire');
  };

  useEffect(() => {
    setPosition({ x: props.selected.position.x, y: props.selected.position.y });
    setSize({ x:  props.selected.size.x, y:  props.selected.size.y });
  }, [props.selected.position]);

  return (
    <React.Fragment>
    <div className='inspector--item-two'>
    <div className='inspector--description'>Position</div>
    <input
      type='number'
      value={Math.floor(position.x)}
      id='x'
      onChange={changePosition}
    />
    <input
      type='number'
      value={Math.floor(position.y)}
      id='y'
      onChange={changePosition}
    />
  </div>
  <div className='inspector--item-two'>
    <div className='inspector--description'>Seconds</div>
    <input
      type='number'
      value={Math.floor(seconds)}
      min={1}
      max={240}
      onChange={changeSeconds}
    />
    <input
    type='range'
    id='points'
    name='points'
    min='1'
    max='240'
    value={seconds}
    onChange={slider} />
    </div>

    <div className='inspector--item-two'>
    <div className='inspector--description'></div>
    <button onClick={toggleStart}>{start ? 'Stop' : 'Start'}  </button>
    <button onClick={test}>Test</button>
    </div>

    <svg class='base-timer__svg' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
    <g class='base-timer__circle'>
      <circle class='base-timer__path-elapsed' cx='50' cy='50' r='45'></circle>
      <path
        id='base-timer-path-remaining'
        stroke-dasharray='283'
        class='base-timer__path-remaining ${remainingPathColor}'
        d='
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        '
      ></path>
    </g>
  </svg>
    </React.Fragment>
  );
};

export { TimerInspector };