Recommended ways to overlay words over an audio speech and let the user adjust them?

[empz]

I'm working on a React application that transcribes speech into text. I need to overlay each word on top of the audio waveform and allow the user to fine-tune the timings by moving/resizing each word overlay.

I've just discovered this library and built my own custom React hook to initialize the overview and zoom views.

I'm now looking for the best way to overlay each word on top of the zoomView waveform. I'm currently playing with overlay segments.

A few questions:

1. How to move a segment overlay?
   To move it I need to perform 2 resize actions (dragging the start and then dragging the end, or viceversa)? Or is there a way that can I simply drag it? Maybe I'm missing an option here.

2. Is it possible to avoid overlays from overlapping? If not, how would you implement this?

3. Can the resize handles be hidden and only displayed on hover?

Thanks for the amazing library!

[empz]

Also, some of the overlay options do not seem to be working like overlayColor and overlayBorderColor.

I'm initializing Peaks with the following zoomview options:

{
  // ... rest of peaks.js options
  zoomview: {
      waveformColor: "rgba(255, 255, 255, 0.2)",
      playheadColor: "green",
      playheadWidth: 2,
      segmentOptions: {
        overlay: true,
        markers: false,
        overlayColor: "#ff0000",
        overlayOpacity: 0.25,
        overlayBorderWidth: 5,
        overlayBorderColor: "#ffffff",
        overlayLabelAlign: "center",
        overlayLabelVerticalAlign: "middle",
        overlayFontSize: 20,
        overlayFontFamily: `"Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif`,
        overlayLabelColor: "#ffffff",
      },
    }
}

But my overlays look like this no matter what I set to overlayColor and overlayBorderColor