Pigeon Maps Popup get rendered infinitely onMouseOver

Question

When I hover over a geopoint marker the popover appears and then disappears infinitely and until I move mouse off of marker. My HandleMouseOver function should only show the popup once, I am unsure why it is looping through multiple times:

const handleMarkerMouseOver = (args: any) => {
            console.log("arges", args)
        setPopoverVisible(true)
        setDoc(args.payload.doc_fields)
        setAnchor(args.anchor)
        setPopoverContent(args.payload.doc_fields['@service_address'])
    }

All of code:

export function NewMap(props: any): ReactElement {
    const [anchor, setAnchor] = useState(undefined)
    const [popoverVisible, setPopoverVisible] = useState(false)
    const [popoverContent, setPopoverContent] = useState(undefined)
    const [doc, setDoc] = useState()

    const [showVisualDrawer, setShowVisualDrawer] = useState(false)
    const pageSizeInRedux = useAppSelector(selectPageSize)
    const mapFormData = props
    const mapData = useWaveWatcherEventsMapDataQuery({
        index: props.index,
        pageSize: pageSizeInRedux,
        body: props.body
    })

    let dataLength = 1
    if(mapData.data !== undefined) {
        dataLength = mapData?.data?.buckets?.map((t: { doc_count: any; }) => t.doc_count).reduce((a: any, b: any) => a + b, 0);
    }

    let waveContent: ReactElement = <></>

    if (mapData.isSuccess && dataLength > 1) {


        const handleMarkerClick = (args: any) => {
            setPopoverVisible(true)
            setDoc(args.payload.doc_fields)
            setAnchor(args.anchor)
            setPopoverContent(args.payload.doc_fields['@service_address']);
    }

    const handleMarkerMouseOut = (args: any) => {
        setPopoverVisible(false)
    }

    const handleMarkerMouseOver = (args: any) => {
            console.log("arges", args)
        setPopoverVisible(true)
        setDoc(args.payload.doc_fields)
        setAnchor(args.anchor)
        setPopoverContent(args.payload.doc_fields['@service_address'])
    }

    let center: any = [0, 0]
    const points = mapData.data.buckets.map((e: any, index: number) => {
            center = e.location.split(',').map((c: string) => (parseFloat(c))) || utilityCoordinates
            return (
                <Marker key={index}
                        width={20}
                        color={Color.darkblue}
                        anchor={center}
                        payload={e}
                        onClick={handleMarkerClick}
                        onMouseOut={handleMarkerMouseOut}
                        onMouseOver={handleMarkerMouseOver}
                />
            )
        }
    )

 return (
         waveContent = <>
             <MapStats data={mapData} mapFormData={mapFormData}/>
             <div className={styles.mapWrapper}>
                 <Map height={443} defaultCenter={center} defaultZoom={13}>
                     {points}
                     <ZoomControl/>
                     <Overlay anchor={anchor} offset={[0, 0]}>
                         <Popover
                             visible={popoverVisible}
                             content={popContent}
                             title={'Marker Details'}
                         >
                         </Popover>
                     </Overlay>
                 </Map>
             </div>

This is the popover that appears and disappears infinitely:

Answer 1

This may or may not be helpful, but it seems related to a problem that I also just encountered today. My Popover would appear then disappear over and over. The culprit was the backdrop that loads (similar to how a modal backdrop loads in the background) so then my component would think I'm not moused over it anymore, then it would disappear, then it would think I'm on it again, reappear, etc... I eventually just used a MUI Popper instead of the Popover. Hope this helps.