How to create a line connection mxGraph

I am trying to create a line connection on click an image icon, I have tried the same using the wires.html example. But it is not working. I am using react with mxGraph. How to implement this. Is there any way to achieve this.

mxEvent.addGestureListeners(
    img,
    mxUtils.bind(this, function(evt) {
      mxConnectionHandler.prototype.isStartEvent = function(me) {
        console.log("Here we have to start the line connection");
      };
    })
  );

I have to start the line connection inside the bind event. Is there anyway to fix this. I have tried but none of them is working.

Please check the below code,

mxEvent.addGestureListeners(
    img,
    mxUtils.bind(this, function(evt) {
      console.log("Line Connection");
      /* Line Connection Starts */
      mxConnectionHandler.prototype.movePreviewAway = false;
      mxConnectionHandler.prototype.waypointsEnabled = true;
      graph.setConnectable(true);

      var connectionHandlerIsStartEvent =
        graph.connectionHandler.isStartEvent;
      graph.connectionHandler.isStartEvent = function(me) {
        console.log(me);
        return connectionHandlerIsStartEvent.apply(this, arguments);
      };
      /* Line Connection Ends */
    })
  );

In the above code, when I click on the line connection hover icon it does not start from the cell. It will start from the mouse where am clicked after pressing hover icon. When I try to connect to target cell it is showing some error and not connecting.

I really need help.

from How to create a line connection mxGraph