Geographies Select dont update

[eduardoalba0]

Hello, first congratulations on your plugin, I found it fantastic and just right for my project. I am trying to implement a World Map, where the user can mark the countries he has already visited. I looked at your "Select Greographies" example, but when the array containing the country codes that the user clicked on is changed, the svg map does not adapt to this change and continues with the map in its initial state. When the map starts with the array already filled in, the countries are selected, does anyone have any tips to help me? I tried to check the documentation and I couldn't find anything about it

[eduardoalba0]

My code:

import React from "react"
import { View, StyleSheet } from "react-native"
import { ZoomableMap, Geographies, Geography } from "react-native-simple-maps"
import { colors, dimens } from "../styles"



const MapaPaises = () => {
  const geoFile = require("../../util/GeoJson/countries/world.json")

  const [state, setState] = React.useState({ selected: ['BRA', 'USA'] });

  const handleClick = (geography) => {
    const isSelected = state.selected.indexOf(geography.properties.ISO_A3) !== -1;
    if (isSelected) {
      console.log('Selecionado');
    } else {
      state.selected.push(geography.properties.ISO_A3)
    }
  }
  const renderGeographies = (geographies, projection) => {
    console.log('renderGeo');

    return geographies.map((geography, key) => {

      const isSelected = state.selected.indexOf(geography.properties.ISO_A3) !== -1;

      return (
        <Geography
          key={key}
          cacheId={geography.properties.ISO_A3}
          geography={geography}
          onClick={() => handleClick(geography)}
          onLongPress={() => handleClick(geography)}
          delayLongPress={3000}
          pressed={true}
          projection={projection}
          style={{
            default: {
              fill: isSelected ? "black" : "white",
              stroke: "black",
              strokeWidth: 0.75,
              outline: "none",
            },
            hover: {
              fill: isSelected ? "green" : "yellow",
              stroke: "#607D8B",
              strokeWidth: 0.75,
              outline: "none",
            },
            pressed: {
              fill: "blue",
              stroke: "#607D8B",
              strokeWidth: 0.75,
              outline: "none",
            },
          }}
        />
      )
    })
  }

  return (
    <View style={styles.container}>
      <View style={styles.mapWrapper}>
        <ZoomableMap >
          <Geographies geography={geoFile} >
            {(geographies, projection) => renderGeographies(geographies, projection)}
          </Geographies>
        </ZoomableMap>
      </View>
    </View >
  )

}


const styles = StyleSheet.create({
  container: {
    height: dimens.screenHeight,
    width: dimens.screenWidth,
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
  },
  mapWrapper: {
    height: dimens.screenHeight,
    width: dimens.screenWidth,
  },
})
export default MapaPaises;