leafletjs @react-leaflet/core/esm/path.js

Question

Hi im trying to use leaflet in a project. But when i executed the result is:

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

My pacakge.json

 "dependencies": {
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "latest",
    "@mui/material": "latest",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
        "leaflet": "1.7.1",
        "react-leaflet": "3.1.0",
    "firebase": "^8.10.0",
    "material-ui-popup-state": "^1.9.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "recharts": "^2.1.1",
    "styled-components": "^5.3.1",
    "web-vitals": "^1.1.2"
  },

And code:

import React, { useEffect } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';

// eslint-disable-next-line no-unused-vars
const MapPlanRoute = (props) => {
    const [map, setMap] = React.useState();

    useEffect(() => {
        console.log('here');
        if ('geolocation' in navigator && map) {
            console.log(map);
            navigator.geolocation.getCurrentPosition(function (cPosition) {
                map.panTo([cPosition.coords.latitude, cPosition.coords.longitude]);
            });
        }
    }, [map]);

    return (
        <MapContainer
            doubleClickZoom={false}
            id="mapId"
            zoom={7}
            center={[20.27, -157]}
            whenCreated={setMap}
        >
            <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            />
        </MapContainer>
    );
};

export default MapPlanRoute;