TypeScript: Errors on react-konva refs

When I try to simulate the hover animation example from Expand Images on Hover on my project with TypeScript with regards to React refs, I have stumbled several errors. Below is the code example that I have the errors:

import { Circle, Layer, Group, Text } from "react-konva";

interface AProps {
  ...
}

export default class A extends React.Component<AProps, {}> {
  private layer: React.RefObject<typeof Layer>;

  constructor(props: AProps) {
    super(props);
    this.layer = React.createRef<typeof Layer>();
  }

  handleExpand = e => {
    const shape = e.target;
    document.body.style.cursor = "pointer";
    shape.scaleX(1.5);
    shape.scaleY(1.5);
    this.layer.current!.draw();
  };

  handleRestore = e => {
    const shape = e.target;
    document.body.style.cursor = "default";
    shape.scaleX(1);
    shape.scaleY(1);
    this.layer.current!.draw();
  };

  render() {
    const { width, color } = this.props;
    return (
      <Layer ref={this.layer}>
        <Circle
          x={x}
          y={y}
          radius={width / 2 - 10}
          fill={color}
          stroke={'#000000'}
          strokeWidth={2}
        />
      </Layer>
    );
  }
}

The errors are as following:

• this.layer.current!.draw(); - Property ‘draw’ does not exist on type ‘KonvaContainerComponent<Layer<Node>, LayerConfig>’.
• ref={this.layer} - Type ‘RefObject<KonvaContainerComponent<Layer<Node>, LayerConfig>>’ is not assignable to type ‘string | ((instance: Layer<Node> | null) => void) | RefObject<Layer<Node>> | null | undefined’. Type ‘RefObject<KonvaContainerComponent<Layer<Node>, LayerConfig>>’ is not assignable to type ‘RefObject<Layer<Node>>’. Type ‘KonvaContainerComponent<Layer<Node>, LayerConfig>’ is missing the following properties from type ‘Layer<Node>’: getIntersection, enableHitGraph, disableHitGraph, clearBeforeDraw, and 128 more.

[lavrton]

Can you make a small demo repo? I just tried this:

const App = () => {
  const ref = React.useRef<Konva.Stage>(null);
  return (
    <Stage width={window.innerWidth} height={window.innerHeight} ref={ref} />
  );
};

Works ok for me.

[zivni]

You should import the Layer for the ref from Konva not from react-konva. that is

import * as Konva from "konva"
import { Circle, Layer, Group, Text } from "react-konva";
//and then
private layer: React.RefObject<typeof Konva.Layer>;