I'm writing a react js app project will include a component that should look like the following pictures:

The requirements are:

1. User should be able to move the circles within the grid with the mouse
2. Grid snap - circles can only be positioned on gird line crossings
3. Circles can't be positioned on top of each other - it will automatically position it to the closest grid line crossing.
4. The line is drawn automatically
5. The line should start at a fixed position and should be crossing the cirles
6. The line should be curved
7. I will need to save X and Y coordinates of the cirles in a react state

Not sure whether to write something from scratch with plain javascript, or use some existing npm packages.

I tried searching for some existing libraries, so far I tried doing it with Konva js. Still not sure if it can meet all requirements.

This is the code sample I made on code sandbox, it creates circles, but not sure how to implement all the requirements above.

Any ideas?