wavesurfer.js: Creation of unintentional, buggy regions

Bug description:

Hi all, I have encountered a problem while working with this library which I believe might be a bug. While creating regions, there seems to be an issue with creation of regions that can be called rogue. I am attaching a video of how the unintended behaviour occurs. You can view the ID of the region that is being clicked on in the console on the right side.

https://github.com/katspaugh/wavesurfer.js/assets/66988314/43b5deef-376b-45a5-8f71-4ff8ef7fafb1

You can see how the regions break into two while creating them. I have used a region-click event to check the region.id of the regions so created. When a region breaks into two, the first half of the region does not seem to have an ID which makes removal of that region impossible unless I restart the program (by refreshing the webpage).

You can see how I click on Clear All Regions at the end but somehow, those rogue regions do not seem to go away. Even when I click on those regions to view their ID, nothing appears in the console.

Environment:

• Browser: Chrome
• Version: v7.7.9, imported from: import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

Minimal code snippet:

Regions get created by dragging:

wsRegions.enableDragSelection({
    color: 'rgba(0,120,0,0.3)',
});

Region click code:

wsRegions.on('region-clicked', (region) => {
    console.log(region.id);
});

Clearing all regions code:

function clearAllMaps(){
    wsRegions.clearRegions();
}

Expected result:

Regions shouldn’t be breaking into two for intended use.

Obtained result:

Region created split into two.

PS: Do let me know if I can make any clarifications, it’s my first time opening an issue on GitHub. Thank you!