google-map-react 标记 onclick 不起作用

如何解决google-map-react 标记 onclick 不起作用

为了清楚起见，我使用的是 react-google-map https://www.npmjs.com/package/google-map-react

并且我清楚地遵循了文档，并且能够使其正常工作。这是我的代码。

import React from 'react';
import GoogleMapReact from 'google-map-react';
import {Avatar,Box,Text,useColorModeValue,vstack} from "@chakra-ui/react";

const Marker = ({text}) => (
    <vstack alignItems={'center'}>
        <Avatar backgroundColor={useColorModeValue('#5125b6','#99c3ff')} w={5} h={5} name={' '}/>
        <Text>{text}</Text>
    </vstack>
);
function Map() {
    return (
        <Box mt={5} style={{height: '60vh',width: '100%'}}>
            <GoogleMapReact
                bootstrapURLKeys={{key: 'mymapskey'}}
                defaultCenter={[0,0]}
                defaultZoom={2}
            >
                <Marker
                    lat={59.955413}
                    lng={30.337844}
                    text="hehe"
                    onClick={console.log('haha')}
                />
            </GoogleMapReact>
        </Box>
    );
}

export default Map;

出于某种原因。标记 onClick 不会触发。所以当我点击标记时。什么都没发生。我在我的控制台上看不到任何事情发生。我不确定我做错了什么。任何帮助将不胜感激。