I have an issue with my interactive map, I have a react-leaflet map with GeoJSON layers. Also, I have added some state components like cascader with some name of countries options, like Austria, Belgium, etc... I want to have it like this. After the state from cascader is done (so after I click on a country in cascader), I want to change the color of the selected country from that cascader and display it on the map. For example, if I choose Austria, I want to have colored Austria on the map. Also, cascader is from the Ant Desing library. And selectedCountries is another state that is not important.

function onEachCountry(country, layer) {
    const countryName = country.properties.ADMIN

      if (currentValueCascader.includes(countryName)) {
        layer.setStyle({ fillColor: 'yellow', weight: 2, fillOpacity: 5 })
      } else {
        layer.setStyle({ color: "#000000", fillColor: "white", weight: 1 })
      }
}

return(
<Cascader
                showSearch
                style={{ width: 256 }}
                options={countries}
                onChange={(e) => {
                  setCurrentValueCascader(e)
                }}
                placeholder="Search country"
                value={currentValueCascader} 
                multiple
    
    
              /> 
<MapContainer
            style={{ height: "80vh", width: "auto" }}
            zoom={2.3}
            scrollWheelZoom={true}
            minZoom={2.3}
            center={[30, 0]}>
            <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' />
            <GeoJSON data={features} onEachFeature={(a, b) => { onEachCountry(a, b, selectedCountries) }} style={(a, b) => { onEachCountry(a, b, selectedCountries) }}}  />
          </MapContainer>
    )

I think that somehow the Leaflet map is not re-rendering that chosen option or maybe that GeoJSON, but don't know how to solve it.