react.leaflet.marker.App.js

import { MapContainer, TileLayer, Marker } from 'react-leaflet';
import { Icon } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import markerIconPng from 'leaflet/dist/images/marker-icon.png';
import markShadowPng from 'leaflet/dist/images/marker-shadow.png';

function App() {
  return (
    <MapContainer center={[38.907192, -77.036873]} zoom={8}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://tile.openstreetmap.org/{z}/{x}/{y}{r}.png"
      />
      <Marker
        position={[38.907192, -77.036873]}
        icon={
          new Icon({
            iconUrl: markerIconPng,
            shadowUrl: markShadowPng,
          })
        }
        title="Capital City"
        draggable
      />
    </MapContainer>
  );
}

export default App;