adding connection handler on click hover icon not working mxGraph

Question

I am trying to create an application in which on click a cell 3 icons are displaying. When clicking one of that icon I need to create a connection handler from the selected cell and need to point to some target.

On click the arrow connection button the connection handler should start and should end on mouse click.

I have tried to create but the problem is the line is not displaying. Connection line is showing, but after click the arrow line is not showing.

// Defines a new class for all icons
function mxIconSet(state) {
  this.images = [];
  var graph = state.view.graph;

  // Arrow Connection
  if (graph.getSelectionCount() === 1) {
    var img = mxUtils.createImage(arrowConnectionIcon);
    img.setAttribute("title", "Arrow Connection");
    img.style.position = "absolute";
    img.style.cursor = "pointer";
    img.style.width = "20px";
    img.style.height = "20px";
    img.style.background = "#3b48cc";
    img.style.padding = "5px";
    img.style.borderRadius = "50%";
    img.style.marginLeft = "5px";
    img.style.left = state.x + state.width + "px";
    img.style.top = state.y - 30 + "px";

    mxEvent.addGestureListeners(
      img,
      mxUtils.bind(this, function(evt) {
        var pt = mxUtils.convertPoint(
          graph.container,
          mxEvent.getClientX(evt),
          mxEvent.getClientY(evt)
        );

        graph.connectionHandler.start(state, pt.x, pt.y);
        graph.isMouseClick = true;
        graph.isMouseTrigger = mxEvent.isMouseEvent(evt);
        mxEvent.consume(evt);
      })
    );

    graph.container.appendChild(img);
    this.images.push(img);
  }
}

How to solve the issue, is there any solution. I am new to mxGraph. Any help will be appreciated.