text: import React from 'react'
  import { makeStyles } from '@material-ui/core/styles';
  import { ComposableMap, Geographies, Geography, Annotation, Marker } from "react-simple-maps";
  
  const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.secondary,
    },
  }));
  
  const geoUrl =
    "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json";
  export default function WorldMap({selectedCountry}) {
    const classes = useStyles();
    return (
      <div>
        <ComposableMap
          projection="geoAzimuthalEqualArea"
          projectionConfig={{
            rotate: [-20.0, -52.0, 0],
            scale: 300
          }}
        >
          <Geographies
            geography={geoUrl}
            fill="#D6D6DA"
            stroke="#FFFFFF"
            strokeWidth={0.5}
          >
            {({ geographies }) =>
              geographies.map(geo => <Geography key={geo.rsmKey} geography={geo} />)
            }
          </Geographies>
  
          <Annotation
            subject={selectedCountry.cood}
            dx={-90}
            dy={-30}
            connectorProps={{
              stroke: "#FF5533",
              strokeWidth: 3,
              strokeLinecap: "round"
            }}
          >
            <text x="-8" textAnchor="end" alignmentBaseline="middle" fill="#F53">
              {selectedCountry?selectedCountry.name.toString() : 'France'}
            </text>
          </Annotation>
        </ComposableMap>
      </div>
    )
  }
  