google-map-react marker onclick not working

Just to be clear I am using react-google-map https://www.npmjs.com/package/google-map-react

and I followed the documentation clearly and I was able to get it working. here is my code.

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;

for some reason. the marker onClick doesn't trigger. so when I click on the marker. nothing happens. I see nothing happening on my console. I am not sure what I am doing wrong. any help will be appreciated.

I made these changes to the code and it works!

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

const Marker = ({text}) => (
    <VStack onClick={console.log(text)} 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"
                />
            </GoogleMapReact>
        </Box>
    );
}

export default Map;