多边形没有改变它的颜色 onClick？

Question

我在使用谷歌地图文档生成的一组多边形并单独更改每个多边形的填充颜色时遇到问题，使用 typescript、引导库来显示表单组件和其他元素，下一个代码是 mapComponent.tsx 本身的示例：

    import React, {
    useEffect,
    useRef,
    useState
} from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import {
    useForm,
    SubmitHandler
} from 'react-hook-form';
import {
    Modal,
    Form,
    Button
} from 'react-bootstrap';

这是用于 react-hook-form 的类型：

interface Inputs {
    color: string
    colorRequired: string
    name: string
    nameRequired: string
}

const MyComponent = ({
    center,
    zoom,
    onIdle,
    handleData,
    style,
    children
}: {
    center: google.maps.LatLngLiteral,
    zoom: number,
    onIdle: () => void,
    handleData: (myColor: string) => string
    style: any,
    children: MapProps['children'],

}) => 

{ 
        const [show, setShow] = useState<boolean>(false);
            const toggleShow = () => setShow(!show);
   

 const [jsonPolygons, setJsonPolygons] = useState<google.maps.Polygon[]>([]);
    const {
            register,
            handleSubmit,
            formState: { errors },
            reset
        } = useForm<Inputs>();
        const onSubmit: SubmitHandler<Inputs> = (data) => {
            console.log(data);
            console.log(data.color, data.name);
            setColor(data.color);
            reset({
                color: '',
                name: ''
            })
        }
    useEffect(() => {
       const Map: google.maps.Map | null | undefined = new google.maps.Map(ref.current, {
                center,
                zoom,
    
            })
    
            console.log('this is data: ', polygonData);
    polygonData.map((polygon, index) => {
                console.log('polygon data value is: ', polygon);
    
                const newPolygon2 = new google.maps.Polygon({
                    paths: polygon.paths,
                    fillColor: polygon.fillColor,
                    strokeWeight: 2
                })
                newPolygon2.setMap(Map);
                jsonPolygons.push(newPolygon2);
                const onJsonPolygonClick = (event: google.maps.MapMouseEvent) => {
    
                    console.log('json polygon is clicked: ', event, polygon);
    
    
                }
    
    
    
                newPolygon2.addListener('click', onJsonPolygonClick);
    
            })
            console.log('array of json polygons: ', jsonPolygons);

        const onMapClick = (e: google.maps.MapMouseEvent) => {
                const lat = e.latLng?.lat() || 0;
                const lng = e.latLng?.lng() || 0;
                console.log('the map is clicked', lat, lng);
               
            }
    
            Map.addListener('click', onMapClick);
    const drawingManager = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.POLYGON,
                drawingControlOptions: {
                    position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [
                        google.maps.drawing.OverlayType.MARKER,
                        google.maps.drawing.OverlayType.POLYLINE,
                        google.maps.drawing.OverlayType.POLYGON,
                    ]
                },
                map: Map
            })
    const onPolygonComplete = (polygon: google.maps.Polygon) => {
                console.log('this is the polygon: ', polygon);
                toggleShow();
                const newDrawerPolygon = new google.maps.Polygon({
                    paths: polygon.getPaths(),
                    fillColor: color,
                    strokeColor: 'red',
                    strokeWeight: 2,
                    strokeOpacity: .8
                })
                newDrawerPolygon.setMap(Map);
                setJsonPolygons([newDrawerPolygon, ...jsonPolygons]);
                console.log('the color is: ', color);
                newDrawerPolygon.setOptions({
                    fillColor: color
                })
                console.log('array of json polygons from inside onPolygonComplete: ', jsonPolygons);
                const onPolygonClick = (polygon: google.maps.Polygon) => {
                    console.log('the polygon is clicked', polygon);
                    
    
                }
    
    
                google.maps.event.addListener(newDrawerPolygon, 'click', onPolygonClick);
                newDrawerPolygon.addListener('click', onPolygonClick)
    
            }
    
            google.maps.event.addListener(drawingManager, 'polygoncomplete', onPolygonComplete);
    
    }, [])

   

     return (
                
    
        <div ref={ref} id='map' className='map-mapComponent'>
        
        <Modal show={show} onHide={toggleShow}>
                        <Modal.Header closeButton>
                            <Modal.Title></Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <Form onSubmit={handleSubmit(onSubmit)} className='form'>
                                <label htmlFor='color' className='color-lbl'>Color: </label>
                                <input
                                    className='color'
                                    id='color'
                                    type='text'
                                    placeholder='Insert Color'
                                    {...register('color', { required: true })} />
                                {errors.color && <span>color is required</span>}
                                <label htmlFor='name' className='name-lbl'>name: </label>
                                <input
                                    className='name'
                                    id='name'
                                    type='text'
                                    placeholder='Insert Name'
                                    {...register('name', { required: true })} />
                                {errors.name && <span>name is required</span>}
                                <Button type="submit"
                                    className="sub-btn"
        
                                >Change</Button>
                            </Form>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button variant="secondary" onClick={toggleShow}>
                                Close
                            </Button>
                            <Button variant="primary" onClick={toggleShow}>
                                Save Changes
                            </Button>
                        </Modal.Footer>
                    </Modal>
                </div >
    
    )

    }

问题是，如何通过绘图管理器更改创建的多边形的颜色，使用 react-bootstrap 表单的结果，而不会丢失先前的多边形或页面重新加载？ 你对这样做有什么其他想法吗？