javascript - 状態変数が更新されない - React js

Question

export default function Home() {
    const [tooltip, setTooltip] = useState(false);

    return (
        <DeckGL
            initialViewState={viewport}
            controller={true}
            ContextProvider={_MapContext.Provider}
            width="100vw"
            height="100vh"
        >
            <StaticMap
                mapStyle={"mapbox://styles/mapbox/streets-v11"}
                mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
            />
            <Marker
                latitude={currentLocation.lat}
                longitude={currentLocation.long}
            >
                <Flex
                    onMouseEnter={() => setTooltip(true)}
                    onMouseLeave={() => setTooltip(false)}
                >
                    {tooltip ? <Box2 /> : <Box1 />}
                </Flex>
            </Marker>
            )}
        </DeckGL>
    );
}

この質問に関して多くの答えがあることは知っていますが、うまくいかないようです。

したがって、マップボックスにマーカーがあり、状態変数「ツールチップ」があります。マウスがマーカー上にある場合は true に設定され、離れた場合は false に設定されます。

「setTooltip(true)}」を console.log に置き換えると問題なく動作するため、状態が変化しない理由がわかりません。

true () の場合は 1 つのボックスを表示し、false () の場合は別のボックスを表示したい。

私は何を間違っていますか？