react-canvas | pluggable layout and graphics system

When I run gatsby develop in console this error shows up:

...

I am working on a quiz tool where one of the questions is of image type.

Imagine you are creating the test for your students and you upload an image of a car. You then mark two doors of the car and your question is - Click on one of the doors of the car below. The student, when on this question, will see the same image without any markings/annotations. If the student clicks on the door he/she gets the point, not otherwise. Note: The car doors are random shapes and can be a polygon and preferably can be drawn using a brush tool, sort of.

Here are some thoughts I have but is there a better way or a library that suits this?:

The UI is built in React, the data format can be anything as long as it works.

1. A library that could draw and capture Polygons on an image like this or this. I can then run a "point lies inside polygon" algorithm like this. But that also sounds like overkill. (And I am not sure if they distinguish between multiple polygons cleanly).

2. A library that does both the tasks of option 1.

3. Anything else better?

Sorry if this is asked before, but my question is more React focused and I couldn't find an answer.

I have used storybook npm in my react project, I have my url like this http://localhost:35475/?path=/story/simple-usage--client-demo , when i tried to another params in that url like http://localhost:35475/?path=/story/simple-usage--client-demo&test=123 and reoload it then it removed my test params, can anyone please help me to resolve this issue ? here i have added my code for it

I am building a app where one can sign with pointer.

I have installed react-canvas-signature.

Now I need to get signature from the canvas and show it as a popup, and in their Readme files is said that there is a function toDataURL()

toDataURL(mimetype, encoderOptions): base64string, returns the signature image as a data URL

It says they are accessed through API

API
All API methods require a ref to the SignatureCanvas in order to use and are instance methods of the ref. { this.sigCanvas = ref }} />

However, I am unable to access this function or any function described there. I have tried to use useRef(), createRef() but still nothing. Maybe I am just not doing it right.

Please find below parent component without unnecessary lines:

I have a few npm modules published, all modules for existing libraries, like three.js or react.

The packages seem to be downloaded but i've received no feedback on whether it's done right or not.

What is the high level goal when defining dependencies?

This is confusing because every "extension" just assumes that there is a THREE object available in some context.

My three.js module thus only mentions: