How to change color/borderColor of concrete country in react-leaflet

Question

I have a map with marker on London. How can i change Great Britain color/borders?

<MapContainer 
    center={[51.505, -0.09]}
    zoom={5}
    scrollWheelZoom={true}
    style={{width:"100%", height:"100%"}}
    fullscreenControl={true}
    
>
    <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
    />
    
    <Marker position={[51.505, -0.09]}/>

</MapContainer>

Answer 1

First you need a geojson that shows only the country you want and not the whole world countries. You can find a GBR geojson here.

Now to change the border color, this can be easily achieved by defining fillColor as transparent and specifying the color you want on the style prop of GeoJSON component.

function style(feature) {
    return {
      fillColor: "transparent",
      weight: 2,
      opacity: 1,
      color: "red", //Outline color
      fillOpacity: 1
    };
  }

{geoJSON && <GeoJSON data={geoJSON} style={style} />}

Demo