ProgressBar.js

//ProgressBar.js;

// import hook func from react
import React, {useState} from 'react';

...

export const ProgressBarContainer = () => {
    // init state through hook func useState()
    const [percentRange, setProgress] = useState(0);

    return (
        <div className="container">
            {/*pass the percentageRange state to other components*/}
            <ProgressBar percentRange={percentRange}/>
            <div className="toggle-buttons">
                {/* call setProgress func on button click and bind the callback*/}
                {/* depending on the percentageRange condition to decrease /*/}
                {/* increase in 20% range and reset the progress bar status*/}
                <button onClick={() => setProgress(percentRange > 0 ? percentRange - 20 : 0)}>Decrease</button>
                <button onClick={() => setProgress(percentRange < 100 ? percentRange + 20 : 100)}>Increase</button>
                <button onClick={() => setProgress(0)}>Reset</button>
            </div>
        </div>
    );
};