How to use react-time-range-slideer as a functional component? about react-time-range-slider HOT 1 CLOSED

import { useState } from 'react';
import TimeRangeSlider from 'react-time-range-slider';

const CustomTimeRangeSlider = () => {

    const [sliderValue, setSliderValue] = useState({
        value: {
            start: "00:00",
            end: "23:59"
        }
    }
    );
    const changeStartHandler = (time) => {
        console.log("Complete Handler Called", time);
    }

    const changeCompleteHandler = (time) => {
        console.log("Complete Handler Called", time);
    }

    const timeChangeHandler = (time) => {
        setSliderValue({
            value: time
        });
    }

    return <div className='time-range-selector-container'>
        <TimeRangeSlider
            disabled={false}
            format={24}
            maxValue={"23:59"}
            minValue={"00:00"}
            name={"time_range"}
            onChangeStart={changeStartHandler}
            onChangeComplete={changeCompleteHandler}
            onChange={timeChangeHandler}
            step={5}

            value={sliderValue.value}
        />
    </div>
}

export default CustomTimeRangeSlider;`