area highlight wont work when I search it thru input field

[chishing96]

Stackoverflow posted: https://stackoverflow.com/questions/71656564/i-want-to-highlight-image-area-when-i-search-it-thru-input-field

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')}
/>

[NishargShah]

Can you please give me a working example of it?

[NishargShah]

I am closing this issue because of the inactivity of the author, feel free to reopen it with a demo