question: Is there any way to stop the user to create a new overlapping region ?

[vishal-4way]

question: Is there any way to stop the user to create a new overlapping region ?

if there is please HELP!

[prakharpbuf]

I don't know if there is any native support for disabling overlapping regions or not but here's some quick code I can think of that will do what you're looking to do:

wavesurfer.on('region-update-end', (r) => {
    for(let region of Object.values(wavesurfer?.regions?.list)) {
        if(r.id == region.id) continue
        if((region.start < r.start && region.end > r.start) || 
          (region.start > r.start && r.end> region.start)) {
            r.remove(); // remove the overlapping region
        }
    }
});

Feel free to improve and modify this as per your use case.
Some tips:
Also look into the 'region-created' event if you add a region using wavesurfer.addRegion({})
Look into 'region-updated' if you wish to let the user still create the region but stop at the point it starts overlapping.