Interactive Map development on React component

Tasks Specification and Requirements:

We have a blocking point in our project and want you to solve this problem by creating a tiny brand new react app:

We need to show an SVG map inside a react component and want to add dynamic layers(Shapes, texts, icons) on top of the SVG map,
Users want to zoom in and zoom out the SVG map.
Users can drag and drop layers(shape, text, icon) during zoom-in and zoom-out modes.
Users can show or hide specific layers from the top of svg.

We already implemented the solution but some of the above features have not worked smoothly. And these are the blocking point for our implementation:

Blocking points
The Draggable does not work smoothly while in zoom-in mode.
When we show and hide some of the icons or shapes from the top of SVG the other icons change their locations.


These are the solutions we used to solve these blocking points but have not worked yet:
https://medium.com/dev-shack/clicking-and-dragging-svg-with-react-and-d3-js-5639cd0c3c3b
https://observablehq.com/@d3/drag-zoom
https://stackoverflow.com/questions/52576376/how-to-zoom-in-on-a-complex-svg-structure
https://www.npmjs.com/package/react-svg-pan-zoom
https://www.npmjs.com/package/react-draggable


This is the screenshot of the task that can give you some idea about how we want to implement it:
I will provide the live link and other info as well,

I need your sample of work and I want to make sure that you have already worked on this type of project.

Thanks