I want to highlight image area when I search it thru input field

Question

Using https://github.com/img-mapper/react-img-mapper , i want to highlight an area by ID when user search the area name.

The current behavior is when I search the area by name, it wont highlight the area by id, and when I click any area with coordinates, all of them stays highlighted without referencing the areaSearchResultByID state.

So far I have these functions and states.

const [stayHighlight, setStayHighlight] = useState(false) //to stay highlight when search is finish.
const [areaSearchResultByID, setAreaSearchResultByID] = useState(0) //set area id state when search is finish.

Handle onKeyDown where I filter the json of searching and set the state of AREA ID

const handleOnSubmitSearchArea = () => {
    cubicleJSON
      .filter((x) => {
        if (searchTerm === x.cubicle_number) {
          console.log(x.department)
        } else if (searchTerm === x.department) {
          if (x.department === 'SPOC') {
            setAreaSearchResultByID(1)
          } else if (x.department === 'GRID') {
            setAreaSearchResultByID(2)
          } else {
            setAreaSearchResultByID(0)
          }
        }
      })
      .map((x, index) => {
        return <></>
      })
    setStayHighlight(true)
  }

and I have this ImageMapper

<ImageMapper
   src={IMG}
   map={MAP}
   natural
   width={1400}
   areaKeyName={areaSearchResultByID}
   stayHighlighted={stayHighlight}
   onImageClick={() => setStayHighlight(false)}
   onMouseEnter={(areas) => setHoverArea(areas.name)}
   onMouseLeave={(areas) => setHoverArea('7th Floor Plan')}
/>