react-leaflet cannot read properties of null (reading useState)

Question

I just installed react-leaflet in order to display a map in a react project. I believe I have followed the setup instructions to a T, but I still keep getting this error:

this error only appears when I try to render the MapContainer component. Here's the code:

import React, { useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';
import './Events.css';

function Events() {
  return (
    <MapContainer center={[51.505, -0.09]} 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={[51.505, -0.09]}>
    <Popup>
      A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
  </Marker>
</MapContainer>
  )
}

export default Events

css:

#map { height: 180px; }

Answer 1

Issue remains unknown, but deleting and remaking the react app fixed it.