want to give average height to wave in wavesurfer - reactjs

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 :)