Selectable states in react-simple-maps

Question

I'm creating a map using react-simple-maps librery

this is my code so far

<ComposableMap
  style={{ backgroundColor: "white", }}
  projection="geoAlbers"
  fill={'rgb(185,185,185)'}
  projectionConfig={{
    center:[-5, 25]
  }}>
      <Geographies style={{backgroundColor:'green', bottom:100}} geography={geoUrl}>
        {({ geographies }) =>
          geographies.map(geo => (
            <Geography key={geo.rsmKey} geography={geo} />
          ))
        }
      </Geographies>
      <Marker coordinates={[-100.460846,25.649345]}>
      <g
        fill="none"
        stroke="#003DA5"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        transform="translate(-12, -24)"
      >
        <circle cx="12" cy="10" r="3" />
        <path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
      </g>
  </Marker>
  </ComposableMap>

but is there any way to get rid off of this border when you select a state ?

Answer 1

You can do that, passing the style attribute on <Geography />.

<ComposableMap>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map(geo => <Geography style={{
            default: { outline: "none" },
            hover: { outline: "none" },
            pressed: { outline: "none" },
          }} key={geo.rsmKey} geography={geo} />)
        }
      </Geographies>
    </ComposableMap>