Моя переменная состояния не обновляется - 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>
    );
}

Я знаю, что на этот вопрос есть много ответов, но мне кажется, что это не работает.

Итак, у меня есть маркер на моем картографическом блоке и у меня есть всплывающая подсказка для переменной состояния. Если указатель мыши наведен на маркер и он устанавливает для него значение «истина», а при выходе - значение «ложь».

Если я заменю "setTooltip(true)}" на console.log, он будет работать безупречно, поэтому я не знаю, почему состояние не меняется.

Я хочу показать одно поле, если оно истинно (), а другое - если оно ложно ().

Что я делаю не так?