Establishing only one region when using drag selection

[MrEdwards007]

Good day,

I would like to enable drag selection of region but I only want one region to exist.
There are things that I can do, such as clearing regions when I click on the waveform.
However, I havent been able to find a way to prevent multiple regions.

If I utilize the logic in #1681 (comment) I get a favorable outcome if there are no pre-created regions. If they already exist, those regions appear to be ignored during the drag. I can create a drag region on the already existing ones but the ones that I create during the drag are limited to just one.

        regions.enableDragSelection({{
            color: 'rgba(255, 0, 0, 0.1)',
            drag: false,
            resize: true,
        }})

        // https://github.com/katspaugh/wavesurfer.js/issues/1681
        regions.on('region-created', (region) => {{
            regions.getRegions().forEach((r) => {{
                if (r.id != region.id) {{
                   r.remove();
                  console.log('id =', r.id)
                }}
            }});
        }});

        regions.on('region-updated', function(region){{
           const numRegions = regions.getRegions().length;
           console.log('updates -- number of regions =', numRegions);
            if(numRegions > 1){{
                //regions.clearRegions()
            }}
        }});

        // Reset when the user clicks anywhere in the waveform
        ws.on('interaction', () => {{
            const numRegions = regions.getRegions().length;
            console.log("Number of regions:", numRegions);
            if (numRegions >= 1) {{
                regions.clearRegions();
            }}
        }})