Grafana react plugins with canvas inside - reactjs

Question

I am trying to write a grafana react plugin with a canvas inside. I created my template with npx #grafana/toolkit plugin:create my-plugin. I ran this template with yarn install, yarn dev --watch. It works.
To test, I removed options in module.ts file like this
import { PanelPlugin } from '#grafana/data';
import { SimplePanel } from './SimplePanel';
export const plugin = new PanelPlugin(SimplePanel);
I modified SimplePanel.tsx file as follow
import React, { PureComponent } from 'react';
import { PanelProps } from '#grafana/data';
export class SimplePanel extends PureComponent<PanelProps> {
componentDidMount() {
console.log(this.refs.canvas)
const ctx = this.refs.canvas.getContext('2d');
console.log(ctx)
}
render() {
return (
<canvas ref="canvas" width={300} height={300}/>
);
}
}
And I got the following error :
Property 'getContext' does not exist on type 'ReactInstance'.
Property 'getContext' does not exist on type 'Component< any, {}, any>'.
How is it possible to add a canvas in grafana react plugin ?
Thanks for answer.

Answer 1

Thanks to MateuszFalkowski's comment, I manage to add a canvas :
import React, { PureComponent } from 'react';
import { PanelProps } from '#grafana/data';
export class SimplePanel extends PureComponent<PanelProps> {
myCanvasRef = React.createRef<HTMLCanvasElement>()
componentDidMount() {
console.log(this.myCanvasRef)
const ctx = this.myCanvasRef.current!.getContext('2d');
console.log(ctx)
}
render() {
return (
<canvas ref={this.myCanvasRef} width={300} height={300}/>
);
}
}