onMouseEnter 不适用于下一个应用程序中的 div，而 div 作为子级传递

Question

我有一个地图应用程序可以在谷歌地图上呈现标记。标记作为 div 传递给组件以在那里呈现。

解决方案来自地图开发者的官方youtube频道。传递给 MyMarker 的潜水是作为标记呈现的潜水，我需要为该 div 使用 onClick 和 onMouse enter。

这里是代码沙盒链接，我是用Next 13创建的，但是在沙盒中，Next是一个较早的版本，请记住：https://codesandbox.io/p/sandbox/frosty-moore-2kmtio 请获取一个谷歌地图 API 密钥并创建一个 MapId，将它放在它提到的地方

const Properties = ({ data, map }) => {
    const [highlited, sethighlited] = useState(null)
    function handleMouseEnter() {
        console.log('Mouse entered');
    }
    return (
        <>
            {
                data.map((e, i) => {
                    
                   return (<MyMarker key={i} map={map} data={e} position={{
                    lat: e.location.coords.latitude,
                    lng: e.location.coords.longitude,
                }}>
                    <div
                    
                        className={` bg-blue-700 text-white font-bold py-2 px-4 rounded-full`}
                        onMouseEnter={() => console.log("Mouse enter")}>
                           <h2>{`${e.price}`}</h2>
                    </div>
                </MyMarker>)})
            }

        </>
    )
}
========The marker====
const MyMarker = ({ data, map, children, position }) => {
    const rootRef = useRef()
    const markerRef = useRef()

    useEffect(() => {
        if (!rootRef.current) {
            const container = document.createElement("div");
            rootRef.current = createRoot(container)
            markerRef.current = new google.maps.marker.AdvancedMarkerView({
                position: position,
                content: container
            })

        }

    }, [])

    useEffect(() => {
        rootRef.current.render(children)
        markerRef.current.position = position
        markerRef.current.map = map

    }, [position, map, children])


}

这里 onMouseEnter 不工作

我试过直接渲染，但是不行