javascript - カスタム マーカーが表示されない

Question

マップを表示するために react-leaflet を使用しました。また、ルーティングにはリーフレットルーティングマシンを使用しました。ルートは正しく表示されますが、マーカーは車のアイコンによって上書きされません。divIcon を使用してマーカーをオーバーライドするためにルーティングと反応リーフレットの両方を試しましたが、まだ成功していません。

これが私のコードです

class CarRouting extends MapLayer {
  componentWillMount() {
    super.componentWillMount();
    const { map, from, to, position, ...props } = this.props;
    props.icon = L.divIcon({
        className: 'my-div-icon',
    });
    this.leafletElement =
  L.Routing.control({
  position: 'topleft',
  waypoints: [
    L.latLng(from[0], from[1]),
    L.latLng(to[0], to[1]),
  ],
}).addTo(map);
const source = L.marker([from[0], from[1]], props);
const destination = L.marker([to[0], to[1]], props);
const cities = L.layerGroup([source, destination]);
  }

  render() {
    return null;
  }
}

export default CarRouting;

car-result.js

  const icon = divIcon({
    className: 'my-div-icon',
    iconSize: [30, 30]
  });

  return (
    <Map center={position} zoom={5} style={{ height: 600 }}>
      <TileLayer
        url='https://mt{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'
        subdomains='0123'
      />
      <Marker position={position} icon={icon} />
      <CarRouting from={[cityOrigenLat, cityOrigenLng]} to={[cityDestinoLat, cityDestinoLng]} />
    </Map>
  );
};

main.css

.my-div-icon {
  background: url('../../../public/assets/img/icons/shared_car.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
}

何か見逃しましたか？

アップデート

ルーティングも現在壊れており、マーカーは車の画像で上書きされていません。