How to connect React Select and JQVMap to highlight selected regions

Question

I have integrated a jqvmap in my Reactjs project and also have a Select from react-select. Now, I want to connect the two components so that when I select a region in the Select, the corresponding region is highlighted on the map.

The jqvmap component has a prop called selectedRegions that takes an array of strings in the format ["fr-01", "fr-75"] for highlighting regions on the map. So, I want to dynamically update this array whenever a region is selected from the react-select.

How can I achieve this? Is there any specific approach I should take to format the selected region from the react-select to match the required format of the selectedRegions prop? Any help or guidance would be greatly appreciated.

Thank you.

heres some code to explain what i try

  const [selectedOptions, setSelectedOptions] = useState([])
  const [map, setMap] = useState({})
  const mapRef = useRef(null)


  const handleSelectFromMap = (event, code, region) => {
    const onlyCodeNumber = code.slice(3)
    const toFind = franceDepartments.locations.find((dept) => dept.id === onlyCodeNumber)
    const tempObj = {
      value: onlyCodeNumber,
      label: toFind && toFind.name
    }
    setQueryObject((prevState) => ({
      ...prevState,
      selectedDepartments: [...prevState.selectedDepartments, tempObj]
    }))
    setSelectedOptions(prevState => [...prevState, `fr-${onlyCodeNumber}`.trim()])

  }

  const handleDepartmentSelectChange = useCallback(
    (selectedOption) => {
      const newSelectedOptions = selectedOption.map((op) => `fr-${op.value}`.trim().toString())
      setSelectedOptions(newSelectedOptions)

      const newSelectedDepartments = selectedOption.map((op) => ({
        value: op.value,
        label: op.label.split(" (")[0]
      }))

      setQueryObject((prevState) => ({
        ...prevState,
        selectedDepartments: newSelectedDepartments
      }))

      // Remove deselected options
      const deselectedOptions = selectedOptions.filter((option) => !newSelectedOptions.includes(option))
      setSelectedOptions((prevState) => prevState.filter((option) => !deselectedOptions.includes(option)))
      setMap(prevMap => ({
        ...prevMap,
        selectedRegions: [...selectedOptions]
      }))
    },
    [setSelectedOptions, selectedOptions, setQueryObject]
  )


  useEffect(() => {
    setMap(jQuery(mapRef.current).vectorMap({
      map: 'france_fr',
      backgroundColor: '#ffffff',
      borderColor: '#ffffff',
      borderOpacity: 0.25,
      borderWidth: 1.5,
      color: '#add3e5',
      enableZoom: true,
      hoverColor: "#36addd",
      hoverOpacity: 0,
      multiSelectRegion: true,
      normalizeFunction: "polynomial",
      scaleColors: ['#b6d6ff', '#005ace'],
      selectedColor: "#ffb822",
      showTooltip: true,
      selectedRegions: selectedOptions,
      // eslint-disable-next-line object-shorthand
      onRegionDeselect: handleRegionDeselect,
      // eslint-disable-next-line object-shorthand
      onRegionClick: handleSelectFromMap
    }))
  }, [])

return <>
    <div ref={mapRef} id="vmap" className="map-container" style={{ width: '100%', height: '500px' }}></div>
    <Row>
      <Col>
        <FormGroup>
          <Label><b>Département</b></Label>
          <Select
            style={{ menu: provided => ({ ...provided, zIndex: 9999, whiteSpace: "normal" }) }}
            placeholder={"Sélectionner"}
            onChange={(selected) => handleDepartmentSelectChange(selected)}
            options={optionsDepartmentSelect}
            closeMenuOnSelect={false}
            isMulti
            theme={selectThemeColors[3]}
            components={animatedComponents}
            value={queryObject.selectedDepartments}
          />

        </FormGroup>

      </Col>
    </Row>
  </>
}

i have two function one to add the queryObject.selectedRegions array from the map and one to be able to add to the queryObject.selectedRegions array each time i set the queryObject i also set the selectedOptions with setSelectedOptions(prevState => [...prevState, fr-${onlyCodeNumber}.trim()])

its looks like the prop selectedRegions don't want to read my selectedOptions array

link to the jqvmap doc https://www.10bestdesign.com/jqvmap/documentation/