I'm attempting to style markers to my map, but nothing works.
const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
const MapChart = () => {
return (
<ComposableMap projection="geoAlbersUsa">
<Geographies geography={geoUrl}>
{({ geographies }) => (
<>
{geographies.map(geo => (
<Geography
key={geo.rsmKey}
stroke="#FFF"
geography={geo}
fill="#DDD"
/>
))}
</>
)}
</Geographies>
{airports.map((item, index) => {
return <Marker key={index} coordinates={[marker.LONGITUDE, marker.LATITUDE]} onClick={handleClick.bind(this, marker)}
style={{
cursor: "pointer"
default: { fill: "#06F" },
hover: { fill: "#000" },
pressed: { fill: "#02A" },
}}
>
<circle r={5} fill="#F53" />
</Marker>
})}
</ComposableMap>
)}
The style part is not effective on the markers at all. What I'm I missing?