Align the button in Wavesurfer-react waveform- button should be down on the waveform

Question

both button is after the 2 waveform, I want waveform and then the button under on that waveform, same with the other one

Can somebody help me with the alignment of the button, on the photo, you see that the button for the first is together with the second button, that should not be the behavior, the button should be after the waveform , and same with the second waveform

Here's my code:

code here

import React, { useCallback, useRef, useMemo } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { WaveSurfer, WaveForm } from "wavesurfer-react";

import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";

const Buttons = styled.button`

      display: inline-block;
`;

const Button = styled.button``;

function Waves() {


 const plugins = useMemo(() => {
    return [
      {
        plugin: RegionsPlugin,
        options: {
          dragSelection: false
        }
      }
    ].filter(Boolean);
  }, []);

  const wavesurferRef = useRef();



  const handleWSMount = useCallback((waveSurfer) => {
    if (waveSurfer.markers) {
      waveSurfer.clearMarkers();
    }

    wavesurferRef.current = waveSurfer;

    if (wavesurferRef.current) {
      wavesurferRef.current.load('../../soundsgenere/rocktwo.mp3');

      wavesurferRef.current.on("ready", () => {
        console.log("WaveSurfer is ready");
      });

      wavesurferRef.current.on("region-removed", (region) => {
        console.log("region-removed --> ", region);
      });

      wavesurferRef.current.on("loading", (data) => {
        console.log("loading --> ", data);
      });

      if (window) {
        window.surferidze = wavesurferRef.current;
          }
        }
      }, []);

      const play = useCallback(() => {
        wavesurferRef.current.playPause();
      }, []);

      const next = useCallback(() => {
        wavesurferRef.current.skipForward();
      }, []);

      const back = useCallback(() => {
        wavesurferRef.current.skipBackward();
      }, []);

  return (
    
<div className="wav">
   
    <WaveSurfer
        plugins={plugins}
        onMount={handleWSMount}
        progressColor="#DB2C3B"
        barWidth={2.67}
        barGap={4}
       
      >     
        <WaveForm id="waveform" cursorColor="transparent" />
          
      </WaveSurfer>
       <Buttons>
        <Button onClick={play}>Play / Pause</Button>
      </Buttons>
           
      <WaveSurfer
        plugins={plugins}
        onMount={handleWSMount}
        progressColor="#DB2C3B"
        barWidth={2.67}
        barGap={4}
       
      >
     
        <WaveForm id="waveform" cursorColor="transparent" />
          
      </WaveSurfer>
       <Buttons>
        <Button onClick={play}>Play / Pause</Button>
      </Buttons>
    
    </div>
  );
}

export default Waves;

I want the button after each waveform.

Answer 1

Ive already fix this, we have to call the id of the audio or song that on the waveform.