Tooltip positioning issue

[Omansh14]

Tooltip positioning issue. Cannot modify it's position. The component was taking full screen to adjust it, I used scaling property.
Here is my snippet:

`
import React from 'react';
import DatamapsIndia from 'react-datamaps-india';

const D3DataMap = ({roamingState}) => {

    const regionData = roamingState.reduce((acc, item) => {
    const stateName = item.state.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, char => char.toUpperCase());
    acc[stateName] = { value: item.count };
    return acc;
  }, {})

return (
    <div style={{transformOrigin: "center", transform: "scale(1)"}}>
        <DatamapsIndia
            regionData={regionData}
            hoverComponent={({ value }) => {
                return (
                    <div>
                        <div>{value.name}:{value.value}</div>
                    </div>
                );
            }}
            mapLayout={{
                title: "Roaming States",
                legendTitle: "Number of Calls",
                startColor: "#FFDAB9",
                endColor: "#FF6347",
                hoverTitle: "Count",
                noDataColor: "#f5f5f5",
                borderColor: "#8D8D8D",
                hoverBorderColor: "#8D8D8D",
                hoverColor: "green",
            }}
        />
    </div>
);

};

export default D3DataMap;
`

How can I fix this issue?