how to use RoutingMachine for creating path with manually added markers in reactleaflet map

Question

as i have added the multiple markers but i want the create the path with RoutingMachine in reactleaflet map with those added markers anyone give me solution for this code below. in this we want to add the path between markers we added

1. MyComponent is using for setting the markers on mouse click
2. RoutingMachie is responsible for make route path on the map
3. In this we want to add the path between markers we added

import React, { useEffect, useState, useRef } from "react";
import L from "leaflet";

import {
  TileLayer,
  MapContainer,
  LayersControl,
  Popup,
  Marker,
  useMapEvents,
  useMapEvent,
} from "react-leaflet";
import { Button } from "@material-ui/core";
import "leaflet-routing-machine";
import "leaflet-routing-machine/dist/leaflet-routing-machine.css";

import osm from "./osm-providers";
import AuthService from "../../../services/auth.service";

import markerICon from "../../../assets/Default/map_blue.svg";
const AddRouteFenceMap = (props) => {
  const [map, setMap] = useState(null);

  const [markers, setMarkers] = useState([]);
  const [geoPoints, setGeoPoints] = useState([]);
  const [routingMachine, setRoutingMachine] = useState(null);
  const markerPoints = [];
  const icon = L.icon({
    iconSize: [25, 41],
    iconAnchor: [10, 41],
    popupAnchor: [2, -40],
    iconUrl: markerICon,
  });
  L.Marker.prototype.options.icon = icon;

  const RoutingMachineRef = useRef(null);
  // Create the routing-machine instance:
  useEffect(() => {
    if (!map) return;
    if (map) {
      RoutingMachineRef.current = L.Routing.control({
        position: "bottomleft",
        lineOptions: {
          styles: [
            {
              color: "#757de8",
            },
          ],
        },
        waypoints: [],
      });
      setRoutingMachine(RoutingMachineRef.current);
    }
  }, [map]);

  useEffect(() => {
    if (routingMachine && props?.geoPoints?.length > 1) {
      routingMachine.addTo(map);
      routingMachine.setWaypoints(props.geoPoints);
    }
  }, [routingMachine, props]);

  const setWayRoutingPoints = (routingMachine, marker) => {
    if (routingMachine) {
      routingMachine.addTo(map);
      routingMachine.setWaypoints(geoPoints);
      RoutingMachineRef.current.on("routeselected", function (e) {
        var route = e.route;

        route.coordinates.map(async (a) => {
          props.geoPoints.push({
            latitude: a.lat,
            longitude: a.lng,
            address: "",
            isAuto: 1,
          });
        });
      });
    }
  };
  const GetAddress = async (lat, lng) => {
    await AuthService.getAddressFromGeoAPI(lat, lng).then((response) => {
      props.waypoints.push({
        location: { lat: lat, lng: lng },
        stopover: true,
      });
      props.geoPoints.push({
        latitude: lat,
        longitude: lng,
        address: response,
        isAuto: 0,
      });
    });
  };

  const MyComponent = () => {
    const map = useMapEvent("click", function (e) {
      // console.log("e value", e);
      const { lat, lng } = e.latlng;
      const newMarker = L.marker([lat, lng]).addTo(map);
      setMarkers((prevMarkers) => [...prevMarkers, newMarker]);

      geoPoints.push([lat, lng]);
      setWayRoutingPoints(routingMachine);
      GetAddress(lat, lng);
    });
    return null;
  };

  return (
    <>
      <MapContainer
        center={props.center}
        zoom={12}
        zoomControl={true}
        style={{ height: "100vh", width: "100%", padding: 0 }}
        whenCreated={(map) => setMap(map)}
      >
        <LayersControl position="topright">
          <LayersControl.BaseLayer checked name="Map">
            <TileLayer
              url={osm.maptiler.url}
              attribution={osm.maptiler.attribution}
            />
          </LayersControl.BaseLayer>
          <MyComponent />
        </LayersControl>

        {/* <useMapEvents>
          {(map) => {
            var theMarker = {};
            map.on("click", function (e) {
              const { lat, lng } = e.latlng;
              if (theMarker != undefined) {
                map.removeLayer(theMarker);
              }
              theMarker = L.marker([lat, lng]).addTo(map);
              //L.marker([lat, lng], { icon }).addTo(map);
              geoPoints.push([lat, lng]);
              setWayRoutingPoints(routingMachine);
              GetAddress(lat, lng);
            });
            return null;
          }}
        </useMapEvents> */}
      </MapContainer>
    </>
  );
};

export default AddRouteFenceMap;