How to Draw Multi Line string With GeoJSON Object Openlayers

Question

I am trying to draw linestring by holding the GeoJSON object. But when drawing process starts, the pointer can be selected everywhere on the map. My purpose is the pointer just be selected on the GeoJSON object

Here is some of the code.

var jsonSource = new ol.source.Vector({
  url: 'https://raw.githubusercontent.com/Kardelennkayaa/ankr_tdelay/main/KAMAN.json',
  format: new ol.format.GeoJSON(),
});

var vector = new ol.layer.Vector({
  source: jsonSource,
  background: 'white',
});
map.addLayer(vector)

var jsonSource_ank = new ol.source.Vector({
  url: 'https://raw.githubusercontent.com/Kardelennkayaa/heroku_app/main/ankara_road.json',
  format: new ol.format.GeoJSON(),
});

var vector_ank = new ol.layer.Vector({
  source: jsonSource_ank,
  background: 'white',
});
map.addLayer(vector_ank)

var draw_lineString = new ol.interaction.Draw({
    type : 'LineString',
    //source:drawSource_ls
    source:jsonSource
})
draw_lineString.on('drawstart', function(evt){
    drawSource_ls.clear()
    //select.setActive(true);
})
draw_lineString.on('drawend',function(evt){
    // alert('point is added')
    clickedCoord_lineString = evt.feature.getGeometry().getCoordinates()
    
    $('#ls_adding').modal('show');
    console.log('clicked at', evt.feature.getGeometry().getCoordinates())
    map.removeInteraction(draw_lineString)
})

function startDrawing_lineString(){
map.addInteraction(draw_lineString)
}

And here is the web interface

The goal is when clicking on the Add LineString, the polyline can be drawn with the relative GeoJSON object. How can I do that? Thanks in advance.