Así es como se ve mi código:

 import { React, useState, useEffect } from 'react'; import { GoogleMapReact } from 'google-map-react'; import styles from './Location.module.scss'; import pinstyles from './TheMap.module.scss'; import { useIntl } from 'react-intl'; /* This file has the actual with the coordinates passed to it */ const TheMap = (props) => { // for holding the API key and language const bootstrapURLKeys = { //should this be french? key: process.env.NEXT_PUBLIC_API_KEY, language: 'en', }; //const [test, setTest] = useState(false); // const marker = new google.maps.Marker({ // position: props.center, // map, // }); // To do with the language of the map const { formatMessage: f } = useIntl(); return ( <div className={styles.main}> <div className={styles.heading}> {f({ id: 'location' })} </div> <div className={styles.mapContainer}> {/* TODO: The defaultZoom should be working but it isn't, not a big deal but fix when there's time (it'll look better) */} <GoogleMapReact bootstrapURLKeys={bootstrapURLKeys} defaultZoom={props.zoom} center={props.center} yesIWantToUseGoogleMapApiInternals options={{ fullscreenControl: false }} > <Marker lat={props.lat} lng={props.lng} /> </GoogleMapReact> </div> {/* Adding the address to the bottom of the map */} {props.location[1].address} {props.location[1].postalCode} </div> ); }; const Marker = (props) => { return ( <> <div className={pinstyles.pin}></div> <div className={pinstyles.pulse}></div> </> ); }; export default TheMap;

Y este es el error completo:

Error de tiempo de ejecución no controlado

Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.

Me gustaría saber cómo deshacerse de este error.

EDITAR: Así es como se ve mi pila de llamadas: