Tengo un problema con mi mapa interactivo, tengo un mapa de folleto de reacción con capas GeoJSON. Además, he agregado algunos componentes de estado como cascada con algunas opciones de nombre de países, como Austria, Bélgica, etc. Quiero tenerlo así. Una vez que se completa el estado de cascader (después de hacer clic en un país en cascader), quiero cambiar el color del país seleccionado de ese cascader y mostrarlo en el mapa. Por ejemplo, si elijo Austria, quiero tener Austria coloreada en el mapa. Además, cascader es de la biblioteca Ant Design. Y selectedCountries es otro estado que no es importante.

 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> )

Creo que de alguna manera el mapa del folleto no vuelve a representar esa opción elegida o tal vez ese GeoJSON, pero no sé cómo resolverlo.