react-leaflet marker is broken

Question

I tried using react-leaflet to show map on my react app, and i did things that are based on the docs, but for some reason, my marker is broken, here's my code

const foodIcon = new L.icon({
        iconUrl: require('../images/makanan.png'),
        iconSize: [35,45]
    })

    const position = [51.505, -0.09]


               <div id="map">
                      <div className="map-container">
                            <MapContainer style={{ width: '100%', height: '600px' }} center={position} zoom={13} scrollWheelZoom={false}>
                                <TileLayer
                                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                />
                                <Marker position={position} icon={ foodIcon }>
                                <Popup>
                                    Hello
                                </Popup>
                                </Marker>
                            </MapContainer>
                       </div>

Answer 1

Double check the image path and whether you have the image in right place. Works for me.

Demo