import React, { useState } from 'react';
import { GoogleMap, DrawingManager, Polygon, Marker } from '@react-google-maps/api';
import { useDispatch } from 'react-redux';
import { openDialog } from 'app/store/fuse/dialogSlice';
import { ConfirmDialog } from 'app/components/ConfirmDialog';
import { Box, Button } from '@mui/material';

const Map: React.FC = () => {
    const [polygons, setPolygons] = useState<Array<Array<{ lat: number; lng: number }>>>([]);
    const [polygonLabels, setPolygonLabels] = useState<Array<string>>([]);
    const dispatch = useDispatch();

    const onPolygonComplete = (polygon: google.maps.Polygon) => {
        dispatch(
            openDialog({
                children: (
                    <ConfirmDialog
                        title="You're sure?"
                        description="You want to add new venue?"
                        onConfirm={() => {
                            const paths = polygon
                                .getPaths()
                                .getArray()
                                .map((path) =>
                                    path.getArray().map((latLng) => ({ lat: latLng.lat(), lng: latLng.lng() }))
                                );

                            setPolygons((prevPolygons) => [...prevPolygons, ...paths]);

                            // Add a dummy label for the new polygon
                            setPolygonLabels((prevLabels) => [...prevLabels, 'Venue']);
                        }}
                    />
                )
            })
        );
    };

    const onOverlayComplete = (e: google.maps.drawing.OverlayCompleteEvent) => {
        const newPolygon = e.overlay as google.maps.Polygon;
        newPolygon.setMap(null);
    };

    const undo = () => {
        const newPolygonList = [...polygons];
        newPolygonList.pop();
        setPolygons(newPolygonList);

        const newLabelList = [...polygonLabels];
        newLabelList.pop();
        setPolygonLabels(newLabelList);
    };

    const deletePolygon = () => {
        dispatch(
            openDialog({
                children: (
                    <ConfirmDialog
                        title="You're sure?"
                        description="You want to delete these records?"
                        onConfirm={() => {}}
                    />
                )
            })
        );
    };

    return (
        <GoogleMap
            center={{ lat: polygons?.[0]?.[0].lat ?? 0, lng: polygons?.[0]?.[0].lng ?? 0 }}
            zoom={5}
            mapContainerStyle={{ width: '100%', height: '100%' }}
            options={{}}
        >

            <div className="flex justify-center">

                <DrawingManager
                    onPolygonComplete={onPolygonComplete}
                    options={{
                        drawingControl: true,
                        drawingControlOptions: {
                            drawingModes: [google.maps.drawing.OverlayType.POLYGON],
                            position: google.maps.ControlPosition.TOP_CENTER
                        },

                        polygonOptions: {
                            editable: true,
                            draggable: true
                        }
                    }}
                    onOverlayComplete={onOverlayComplete}
                />
            </div>

            {polygons?.map((polygon, index) => (
                <>
                    <Polygon
                        key={index}
                        paths={polygon}
                        onClick={deletePolygon}
                        options={{
                            draggable: true,
                            editable: true,
                            fillColor: 'red'
                        }}
                    />
                    <Marker
                        key={`marker-${index}`}
                        draggable
                        position={{
                            lat: polygon.reduce((acc, curr) => acc + curr.lat, 0) / polygon.length,
                            lng: polygon.reduce((acc, curr) => acc + curr.lng, 0) / polygon.length
                        }}
                        label={{
                            text: polygonLabels[index],
                            color: 'white'
                        }}
                        icon="undefined"
                    />
                </>
            ))}
        </GoogleMap>
    );
};

export default Map;

I am working on react google maps api library. I have successfully implemented functionality that allows users to draw and move polygons on the map. However, I’m encountering an issue where, after moving a completed polygon to a new position, a marker (text) that indicates the center of the polygon does not update its position and remains at the initial location of the polygon.