Error While Trying to draw a rectangle using react-leaflet-draw with Vite "Uncaught ReferenceError: assignment to undeclared variable type"

Question

Im getting an error while trying to draw a rectangle "Uncaught ReferenceError: assignment to undeclared variable type", All other shapes are working fine, but the rectangle is not working, when i use Vite, it throws this error, when i use webpack it's working very good

versions:

"react": "^18.2.0",
"leaflet": "^1.9.4",
"react-leaflet": "^4.2.1",
"react-leaflet-draw": "^0.20.4",

import React, { useState } from 'react';
import L from 'leaflet';
import { FeatureGroup } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';

const EditFeature = () => {
    const _onEdited = (e) => {
        let numEdited = 0;
        e.layers.eachLayer((layer) => {
            numEdited += 1;
        });
        console.log(`_onEdited: edited ${numEdited} layers`, e);

        // this._onChange();
    };

    const _onCreated = (e) => {
        alert('test');

        let type = e.layerType;
        let layer = e.layer;
        if (type === 'marker') {
            // Do marker specific actions
            console.log('_onCreated: marker created', e);
        } else {
            console.log('_onCreated: something else created:', type, e);
        }

        console.log('Geojson', layer.toGeoJSON());
        console.log('coords', layer.getLatLngs());
        // Do whatever else you need to. (save to db; etc)

        // this._onChange();
    };

    const _onDeleted = (e) => {
        let numDeleted = 0;
        e.layers.eachLayer((layer) => {
            numDeleted += 1;
        });
        console.log(`onDeleted: removed ${numDeleted} layers`, e);

        // this._onChange();
    };

    const _onMounted = (drawControl) => {
        console.log('_onMounted', drawControl);
    };

    const _onEditStart = (e) => {
        console.log('_onEditStart', e);
    };

    const _onEditStop = (e) => {
        console.log('_onEditStop', e);
    };

    const _onDeleteStart = (e) => {
        console.log('_onDeleteStart', e);
    };

    const _onDeleteStop = (e) => {
        console.log('_onDeleteStop', e);
    };

    const _onDrawStart = (e) => {
        console.log('_onDrawStart', e);
    };

    return (
        <FeatureGroup>
            <EditControl
                onDrawStart={_onDrawStart}
                position='topleft'
                onEdited={_onEdited}
                onCreated={_onCreated}
                onDeleted={_onDeleted}
                draw={{
                    polyline: {
                        icon: new L.DivIcon({
                            iconSize: new L.Point(8, 8),
                            className: 'leaflet-div-icon leaflet-editing-icon'
                        }),
                        shapeOptions: {
                            guidelineDistance: 10,
                            color: 'navy',
                            weight: 3
                        }
                    },
                    rectangle: true,
                    circlemarker: false,
                    circle: false,
                    polygon: false
                }}
            />
        </FeatureGroup>
    );
};

export default EditFeature;

here's a screenshot for the problem

https://firebasestorage.googleapis.com/v0/b/markosbahgat-e49a2.appspot.com/o/Screenshot%20from%202023-08-13%2013-14-25.png?alt=media&token=570bd97c-196d-415f-9721-e45d1b01429e