React with Leaflet: issue color coding map based on country specific data

Question

Essentially, I would like to be able to click a country and see it's trade partners highlighted on the map. I know that I am reading the data corrrectly from the ISO3, and I am able to print it, I just can't seem to add a layer to countries that I am not clicking.

Example: I'd like to click Morocco and have Spain, France, India, etc. become green on the map. Then I'd like to click the US and see Canada and Mexico become green. and on and on.

Right now I have no trouble getting the clicked country to change color.

Here is my code, sorry if it's ugly, this is a hobby for me so I don't know a lot of best practices.

I have tried a number of different solutions based on various tutorials (both on youtube and on leaflet) and AI help, but I am rather stuck.

Thanks!

MainMap.js

class MainMap extends Component {
  mapRef = React.createRef();
  state = {
    selectedCountry: null,
    gdpData: gdpData,
    exportData: exportData,
    countryStyle: {
      default: {
        fillColor: "tan",
        weight: 1,
        color: "black",
        fillOpacity: 1,
      },
      selected: {
        fillColor: "grey",
        weight: 2,
        color: "black",
        fillOpacity: 1,
      },
    },
  };

  // Redefine handleCountryClick as an arrow function
  handleCountryClick = (country, layer) => {
    const { selectedCountry, gdpData, countryStyle, exportData } = this.state;
    handleCountryClick(
      country,
      layer,
      selectedCountry,
      gdpData,
      countryStyle,
      this.setState.bind(this),
      exportData,
      this.mapRef.current
    );
  };

  render() {
    return (
      <div>
        <h1 style={{ textAlign: "center" }}>Ugly Maps</h1>
        <MapContainer
          ref={this.mapRef}
          style={{ height: "80vh" }}
          zoom={2}
          center={[20, 100]}
        >
          <GeoJSON
            data={mapData.features}
            onEachFeature={(country, layer) =>
              onEachCountry(
                country,
                layer,
                this.state.countryStyle,
                this.handleCountryClick,
                this.state.exportData,
                this.mapRef
              )
            }
          />
        </MapContainer>
      </div>
    );
  }
}

export default MainMap;

** And the handleCountyClick.js **

const onEachCountry = (
  country,
   layer, 
   countryStyle,
    handleCountryClick, 
    exportData, 
    mapRef) => {
  layer.setStyle(countryStyle.default);
  layer.bindPopup(country.properties.ADMIN);
  layer.on({
    click: () => {
      console.log("Country clicked:", country.properties.ADMIN);
 
      handleCountryClick(country, layer, countryStyle, exportData, mapRef);
    },
  });
};

const handleCountryClick = (country, layer, selectedCountry, gdpData, countryStyle, setState, exportData) => {
  if (selectedCountry && selectedCountry.layer) {
    selectedCountry.layer.setStyle(countryStyle.default);
  }

  const countryCode = country.properties.ISO_A3;
  const countryExportData = exportData.filter(entry => entry.ISO3 === countryCode);
  const partnerISO3s = countryExportData.map(entry => entry.PartnerISO3);
  const partners = countryExportData.map(entry => entry.Partner);

  console.log("Export data for clicked country:", partners, partnerISO3s);

  const countryGDP = gdpData.find((entry) => entry.ISO3 === countryCode);
  const gdpInfo = countryGDP ? `GDP: ${countryGDP.GDP}` : "GDP data not available";
  layer.bindPopup(`${country.properties.ADMIN}<br>${gdpInfo}`).openPopup();
  layer.setStyle(countryStyle.selected);

  setState({ selectedCountry: { country, layer } });
};


export { onEachCountry, handleCountryClick };