'GoogleMapReact change marker location every 2 seconds error - setState is not a function

I have the following map.jsx file in my react app, which displays a map on screen. I am trying to add a marker to this map (in a separate component called 'MyGreatPlace') which changes location every 2 seconds. It should just update the marker rather than refreshing the whole map, however i am getting the following error:

Uncaught TypeError: setState is not a function

Below is my code:

import GoogleMapReact from 'google-map-react';
import './map.css';
import MyGreatPlace from './my_great_place.jsx';
import React, { useEffect, useRef, useState, setState } from 'react';

const Map = ({ location, zoomLevel, markerLat, markerLong }) => {

    useEffect(() => {
        const interval = setInterval(() => {
            changeMarkerLatitude();
        }, 2000);
        return () => clearInterval(interval);
    }, []);

    const changeMarkerLatitude = () => {
        setState({
            markerLat: markerLat + 50,
        });
    };

    return (
        <div className='map'>
            <div className='google-map'>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'KeyID' }}
                    defaultCenter={location}
                    defaultZoom={zoomLevel}>
                    <MyGreatPlace lat={markerLat} lng={markerLong} text={'A'} />
                </GoogleMapReact>
            </div>
        </div>
    );
};

export default Map;

Does anyone know how i can fix this error, or is there an alternative way of updating the marker location?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source