Issues getting started with react-leaflet

Question

I tried adding the example usage to my site to get started and this is how it displayed. Has anyone seen this issue? Solution?

Code looks like:

import React from 'react'
import { Map as LeafletMap, Marker, Popup, TileLayer } from 'react-leaflet'

export default class TestMap extends React.Component {
   public render = () => {
      const position: [number, number] = [51.505, -0.09]
      return (
         <LeafletMap center={position} zoom={13}>
            <TileLayer
               url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
               attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
            <Marker position={position}>
               <Popup>
                  A pretty CSS3 popup.
                  <br />
                  Easily customizable.
               </Popup>
            </Marker>
         </LeafletMap>
      )
   }
}

Answer 1

I had forgotten to add

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

to index.html