Estoy en el proceso de actualizar mi aplicación a React 17 y usar componentes basados en funciones. En la versión anterior de React, todo estaba basado en clases. El mapa en la versión anterior usaba el folleto 1.7.1. Sin embargo, no se muestra en la nueva versión y muestra una pantalla blanca.

Aquí está mi código:

 import React, { useEffect } from "react"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import "./NewMap.css"; export default function NewMap() { const dispatch = useDispatch(); const position = [35.831, -78.767]; return ( <div> <MapContainer center={position} zoom={13} scrollWheelZoom={false} > <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={position}> <Popup> Test. <br /> Lorem ipsum. </Popup> </Marker> </MapContainer> </div> ); }

También recibo los siguientes errores de consola:

 react.development.js?72d0:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. react-dom.development.js?61bb:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

npm i react-leaflet para obtener la última versión de React Leaflet (3.2.5) y todavía arroja estos errores y me muestra una pantalla en blanco. ¿Alguna idea sobre cómo solucionar este problema?