Icon Marker for Leaflet v4 not showing

Question

I have tried to place custom marker and the default of Leaflet, but still getting crop image in the MapContainer. Here is my code of custom icon.

import { TileLayer } from "react-leaflet/TileLayer";
import { Marker } from "react-leaflet/Marker";
import { Popup } from "react-leaflet/Popup";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const markerIcon = new L.Icon({
  iconUrl: require("../../../Images/marker.jpg"),
  iconSize: [35, 45],
  iconAnchor: [17, 46],
  popupAnchor: [0, -46],
});

  <Marker
    icon={markerIcon}
    position={
      selectedStore
         ? [selectedStore.latitude, selectedStore.longitude]
         : [coordinates.lat, coordinates.lng]
     }
  >
     <Popup>{address}</Popup>
 </Marker>

I am using Next.js version 13.4 and Leaflet v4.