Can not obtain the paths from the <Polygon> component.

Hey there, I am trying to obtain the paths of the Polygon component provided by this library upon essentially updating the component. Here is my code:

import { PolygonProps, Polygon } from '@react-google-maps/api'
import { createPolygon } from './GeoMapFunctions.ts'
import { useReduxSelector } from '../../store/ReduxHooks.ts'
import { useCallback, useRef } from 'react'

const CustomPolygon = () => {
    const { shapeCharacteristics } = useReduxSelector(
        state => state.geoMapSlice
    )

    const polygonRef = useRef<Polygon>()

    const basePath = createPolygon(
        shapeCharacteristics!.center,
        shapeCharacteristics!.sides ?? 4,
        shapeCharacteristics!.radius > 0.1 ? 0.01 : shapeCharacteristics!.radius
    )

    const handleEditPolygon = () => {
        // AT.1
        const { paths } = polygonRef.current as PolygonProps
        console.log('the paths: ', paths)

        // AT.2
        let aa = polygonRef.current as PolygonProps | null
        console.log('A: ', aa)
        console.log('A-type: ', typeof aa)

        // AT.3
        const polygon: PolygonProps = polygonRef.current as PolygonProps
        if (polygon) {
            console.log('the polygon: ', polygon)
            if ('paths' in polygon) {
                const polygonProps = polygon as PolygonProps
                console.log('PolygonProps:', polygonProps)
                // Access polygon properties here
            } else {
                console.log('Not a PolygonProps object.')
            }
        } else {
            console.log('Polygon not available.')
        }
    }

    const onLoad = useCallback((ref: any) => (polygonRef.current = ref), [])
    return (
        <Polygon
            onLoad={onLoad}
            onMouseUp={handleEditPolygon}
            onDragEnd={handleEditPolygon}
            draggable={true}
            editable={true}
            paths={basePath}
            options={{
                strokeColor: 'black',
                fillColor: 'black',
                fillOpacity: 0.5
            }}
        />
    )
}

export default CustomPolygon

I had this issue previously with the component however, there I`ve managed to solve this issue with an identical approach

let circleRef = useRef<Circle>()
const draggedCircle = (circleEventObject: google.maps.MapMouseEvent) => {
        if (circleEventObject.latLng) {
            dispatch(setShapeCenter(circleEventObject.latLng.toJSON()))
        }
    }

    const handleRadiusChange = () => {
        const circleProps = circleRef.current as CircleProps | null

        if (circleProps !== null) {
            console.log('CircleProps prop radius !!!!: ', circleProps?.radius)
            if (circleProps?.radius) {
                dispatch(setShapeRadius(circleProps?.radius))
            }
        }
    }
    const onLoad = useCallback((ref: any) => (circleRef.current = ref), [])

    return (
        <Circle
            onLoad={onLoad}
            draggable={true}
            editable={true}
            center={shapeCharacteristics!.center}
            radius={shapeCharacteristics!.radius}
            onDragEnd={draggedCircle}
            onRadiusChanged={handleRadiusChange}
            options={{
                strokeColor: 'red',
                fillColor: 'red',
                fillOpacity: 0.05
            }}
        />
    )

The reference of the Polygon is a very weird object, when expanded recursively it expands to a very large object

I have found a potential solution here: https://codesandbox.io/p/sandbox/reactgooglemapsapi-editing-a-polygon-popr2?file=%2Fsrc%2Findex.js%3A86%2C31, however, this is a JS solution and I was not able to "convert" it to Type Script, I quickly run into the same issue.

I would very much appreciate if someone could help me understand how to solve this issue, thank you in advance.

JustFly1984 / react-google-maps-api

Can not obtain the paths from the <Polygon> component. #3351