d3 map enhancement

Hi,

I am trying to add weather to my app, so installed a weather package. I wanted to show date and weather in x axis.
I created subscription key. I followed the exact steps.
But still I am getting the error, can you tell me how to fix it.

When I click California I need to zoom in to that state and marker to it. When I click Texas, I need to zoom in to the particular state. Similarly I need to add tooltip on top of the circles on the map showing the cases.
Providing my code snippet and sandbox below.

React package https://github.com/farahat80/react-open-weather#readme

https://codesandbox.io/s/n6ssk7?file=/src/App.js

function App() {
const { data2, isLoading, errorMessage } = useOpenWeather({
key: "68c1eba48e8f3669646eed019c4aa0b1",
lat: "48.137154",
lon: "11.576124",
lang: "en",
unit: "metric" // values are (metric, standard, imperial)
});

console.log("data2", data2); // undefined


In my d3 map I tried to add tool tip by referring the below link,
In the below Example they have provided in js but when I tried to implement in react it’s not working fine.
Can you tell me how to fix it, providing my code snippet and sandbox below

Example: https://medium.com/@anilnairxyz/tooltips-in-d3-svgs-249d3b6650bd


https://codesandbox.io/s/friendly-germain-bpliqe?file=/src/components/Map.js


.style(
"left",
event.pageX - document.getElementById("root").offsetLeft + 20 + "px"
)
.style(
"top",
event.pageY - document.getElementById("root").offsetTop - 60 + "px"
);