React Leaflet icon not showing after build

Question

I'm using React Leaflet for displaying a map and Vite to build. When I use npm run dev, everything works normally, the markers show the correct image like so:

But when I deploy by using npm run build and host it using Firebase hosting, the image cannot be loaded and it shows this:

I've tried many solutions suggested on Stack Overflow but they only work locally, not after build.

Here is my code:

import {
  Circle,
  LayerGroup,
  MapContainer,
  Marker,
  Popup,
  TileLayer,
} from "react-leaflet";

import L from "leaflet";
import iconMarker from "leaflet/dist/images/marker-icon.png";
import iconRetina from "leaflet/dist/images/marker-icon-2x.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
import "leaflet/dist/leaflet.css";
import "./map.css";
const icon = L.icon({
  iconRetinaUrl: iconRetina,
  iconUrl: iconMarker,
  shadowUrl: iconShadow,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
});
const AutoOpenMarkerPopup = (props) => {
  const leafletRef = useRef();
  useEffect(() => {
    leafletRef.current.openPopup();
  }, []);
  return <Marker ref={leafletRef} {...props} icon={icon} />;
};