How to draw a circle?

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Surface } from '@progress/kendo-drawing';

import drawCircle from './DrawCircle';

class RenderSurface extends React.Component {
  surface;
  componentDidMount() {
    drawCircle(this.createSurface());
  }
  createSurface = () => {
    const element = ReactDOM.findDOMNode(this);

    this.surface = Surface.create(element);

    return this.surface;
  }
  render() {
    return (<div id="surface" />);
  }
}

export default RenderSurface;

import { geometry } from '@progress/kendo-drawing';
const { Circle } = geometry;


export default function drawCircle(surface) {
  const circle = new Circle([100, 100], 80, {
    stroke: { color: "red", width: 1 },
    color: "rgb(255, 0, 0)",
  });

  surface.draw(circle);
}

import '@progress/kendo-theme-default/dist/all.css';
import './App.scss';
import React from 'react';
import RenderSurface from './components/RenderSurface';

function App() {
  return (
    <div className="App">
      <RenderSurface/>
    </div>
  );
}

export default App;

TypeError: _node_map__WEBPACK_IMPORTED_MODULE_4__.default[srcElement.nodeType] is not a constructor