React Leaflet Marker offset change

Question

The tip of my markers does not come out exactly where it should. You will see it more clearly in the screen output I will add below. I wrote some properties for icon in L.Icon.Default.mergeOptions but it didn't work I use this code

let DefaultIcon = Leaflet.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
  shadowUrl: iconShadow,
});

Leaflet.Marker.prototype.options.icon = DefaultIcon;

//Third Party imports
import L from 'leaflet';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { useMap } from 'react-leaflet';
import { latLngBounds } from 'leaflet';
import 'leaflet/dist/leaflet.css';
//Components imports
import { PieChart, BarChart, LineChart } from 'components';
//Utils import
import { getCenterMapCoordinates } from 'utils/getCenterMapCoordinates';
import {
  CoordinatInterface,
  DataSourceforRouting,
  GridDataTypes,
} from 'types/Map';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

type DefaultMapWithPopupProps = {
  dataSource: any[];
  height?: string;
  width?: string;
  chartType?: string;
};

function ChangeView({ center, markers }: any) {
  const map = useMap();
  map.setView({ lng: center.latitude, lat: center.longitude });
  let markerBounds = latLngBounds([]);
  markers.forEach((marker: any) => {
    markerBounds.extend([marker.latitude, marker.longitude]);
  });
  map.fitBounds(markerBounds);
  return null;
}

const MapWithPopup = ({
  height,
  chartType,
  dataSource,
}: DefaultMapWithPopupProps) => {
  // const [dataSource, setDataSource] = useState<GridDataTypes[]>([]);
  const [centerForMap, setCenterForMap] = useState<CoordinatInterface>();
  const markersLatLon: CoordinatInterface[] = dataSource?.map(item => ({
    latitude: item.lattitude,
    longitude: item.longitude,
  }));

  useEffect(() => {
    const center: CoordinatInterface | any =
      getCenterMapCoordinates(markersLatLon);
    setCenterForMap(center);
  }, [dataSource]);

  return (
    <>
      {centerForMap ? (
        <MapContainer scrollWheelZoom={true} style={{ height: `${height}` }}>
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {centerForMap && (
            <ChangeView center={centerForMap} markers={markersLatLon} />
          )}
          {dataSource.map((atm: any, index: number) => {
            return (
              <Marker key={index} position={[atm.lattitude, atm.longitude]}>
                <Popup maxWidth="100%">
                  <strong>Customer Id : </strong>
                  {atm.id}
                  <br />
                  <strong>address : </strong>
                  {atm.address}
                  <br />
                  <strong>province : </strong>
                  {atm.province}
                  <br />
                  <strong>district : </strong>
                  {atm.district}
                  <br />
                  <strong>sales person : </strong>
                  {atm.salesPerson}
                  <br />
                  <strong>weekly visits : </strong>
                  {atm.weeklyVisits}

                  {/* {chartType && (
                <div className="chartWrapper">
                  {chartType === 'line' && (
                    <LineChart
                      dataSource={atm.info1}
                      argumentField="country"
                      subtitle="line Chart"
                      title="Line Chart Title"
                    />
                  )}

              )} */}
                </Popup>
              </Marker>
            );
          })}
        </MapContainer>
      ) : (
        <p>Loading...</p>
      )}
    </>
  );
};

export default MapWithPopup;

As you can see in the picture, the marker should show that blue point, but it shows the middle of the sea.

Answer 1

let DefaultIcon = Leaflet.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
  shadowUrl: iconShadow,
});

Leaflet.Marker.prototype.options.icon = DefaultIcon;

then i put in the marker "icon" property

  <Marker
                key={index}
                position={[atm.lattitude, atm.longitude]}
                icon={DefaultIcon}
              >