javascript - React and JSX plus Hiccup custom implementation

Question

I have found a declarative-canvas hiccup implementation, what works like that:

const canvas: HTMLCanvasElement = document.createElement("canvas");
document.body.appendChild(canvas);

const ctx = canvas.getContext("2d")!;

const canvas: HTMLCanvasElement = document.createElement("canvas");
document.body.appendChild(canvas);

const ctx = canvas.getContext("2d")!;

draw(
    ctx,
    ['g', 
    {transform: `translate(10, 0)`},
    ["rect", {stroke: "red"}, [0, 0], 30, 30],
    ["circle", {stroke: "blue"}, [10, 10], 6]
])

I'd like to write this inside a react JSX file taking the advantage of typescript prop check writing my own Group, Rect, and Circle React component.

Something like:

<div>
  <DeclarativeCanvas>
    <Group transfom={`translate(10, 0)`}>
      <Rect stroke={"red"} x={0} y={0} width={30} height={30} />
      <Circle stroke={"red"} x={0} y={0} radius={6} />
    </Group>
  </DeclarativeCanvas>
</div>

Do anyone has any kind of hint or suggestion?