I am writing a one page website in React. At the moment I have a filter window, implemented with help modal window, that contains four categories and looks like this:

These categories are implemented using a dropdown list, i.e. when opened, checkboxes appear. But this is not visually clear to the user and I would like to fix it. In the picture below, I have given the desired implementation in green:

Since I have implemented each category for separate files, I gave an example of my code only for the category - date. Please tell me how can I make it happen.

    function FilterDate() {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpand = () => {
        setIsExpanded(!isExpanded);
    };

    const collapse = () => {
        setIsExpanded(false)
    }
    const expand = () => {
        setIsExpanded(true)
    }


    const [state, setState] = useState([
        {
            startDate: new Date(),
            endDate: null,
            key: "selection"
        }
    ]);
    return isExpanded ? (
        <div>
            <div onClick={toggleExpand}><h6>Date</h6></div>
            <DateRange
                onChange={item => setState([item.selection])}
                moveRangeOnFirstSelection={false}
                ranges={state}
            />
        </div>
    )
        : (
            <div onClick={toggleExpand}><h6>Date</h6></div>
        );
}

export default FilterDate;