Dropdown / close block

On this in my application there is a filter button, when clicked, the user can see a list (done using a modal window) of categories for filtering (Categories are: Method, Status code, Link, Date). Visually, the filter window looks like this:

However, I would like all categories (Method, Status code, Link, Date) to be collapsed and expanded. Schematically, this can be shown as follows:

My code is divided into blocks (for each filter category there is a separate file).
Here I will give an example of how I built the filtering by Method.
And I will be grateful if you tell me how to change it in such a way that this category could open and close (for the rest of the categories I will do it myself)

export default function FilterMethod  () {
const [methods, setMethods] = useState([]);

const onMethodChange = (e) => {
    let selectedMethods = [...methods];

    if (e.checked)
        selectedMethods.push(e.value);
    else
        selectedMethods.splice(selectedMethods.indexOf(e.value), 1);

    setMethods(selectedMethods);
}

return (
        <div>
            <h6>Method</h6>
            <div style={{display: "flex"}}>
                <Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
                <label  htmlFor="method1">Connect</label>
            </div>

            <div style={{display: "flex"}}>
                <Checkbox inputId="method2" name="method" value="Delete" onChange={onMethodChange} checked={methods.indexOf('Delete') !== -1} />
                <label htmlFor="method2">Delete</label>
            </div>

         // Here I shortened the code, since it's just a list of methods

        </div>

)}

.css file

    input[type="checkbox"] {
    width: 50px;
    height: 18px;
    vertical-align: middle;
}