want to give average height to wave in wavesurfer

Question

import React, { useEffect, useRef, useState } from "react";

import WaveSurfer from "wavesurfer.js";

const formWaveSurferOptions = ref => ({
  container: ref,
  barWidth:1,
  waveColor: "#eee",
  progressColor: "OrangeRed",
  cursorColor: "OrangeRed",
  barRadius: 10,
  responsive: true,
  height: 200,
  barGap:0,
  pixelRatio: 5,
  barMinHeight:100,
  normalize: true,
  partialRender: true
});

export default function Waveform({ url }) {
  const waveformRef = useRef(null);
  const wavesurfer = useRef(null);
  const [playing, setPlay] = useState(false);
  const [volume, setVolume] = useState(0.5);

 
  useEffect(() => {
    setPlay(false);

    const options = formWaveSurferOptions(waveformRef.current);
    wavesurfer.current = WaveSurfer.create(options);

    wavesurfer.current.load(url);

    wavesurfer.current.on("ready", function() {
   
      if (wavesurfer.current) {
        wavesurfer.current.setVolume(volume);
        setVolume(volume);
      }
    });

 
    return () => wavesurfer.current.destroy();
  }, [url]);

  const handlePlayPause = () => {
   ...
  };

  const onVolumeChange = e => {
    ...
  };

  return (
    <div>
      <div id="waveform" ref={waveformRef} />
      <div className="controls">
        <button onClick={handlePlayPause}>{!playing ? "Play" : "Pause"}</button>
        <input
         ...
        />
        <label htmlFor="volume">Volume</label>
      </div>
    </div>
  );
}

The problem in this is that, i want to set the height of the minpeak of the wave and also give the height an average that at this level it does not go up. i tried the minHeightBar, but unfortunatelydoes't work at all, I have connected the two images for better understanding, so if any one knows this so please help, thankyou :)