Invalid hook call error after using React-img-mapper

Question

I want to use react-img-mapper for my app too make a clickable world map. i installed it with npm and imported like this.

import React from 'react'
import map from './coords.json'
import ImageMapper from 'react-img-mapper';
import world from './map.jpg'

export default function Map() {
    const url= world
    const imgg=map
    return (
        <>
        <ImageMapper src={url} map={imgg} />
        </>
    )
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import Map from './components/Map';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <><Map /></>

)

after npm start there is a whitespace in browser and these errors in console.

where am i doing wrong?