How can I create a function with Menu Dropdown when click

I'm trying to create a function onClick for my menu dropdown but when I click this menu all the menu dropdown appear as well.

Here is my code base in my project:

filterBlock.js:

const FilterBlock = props => {
    const {
        filterApi,
        filterState,
        filterFrontendInput,
        group,
        items,
        name,
        onApply,
        initialOpen
    } = props;

    const { formatMessage } = useIntl();
    const talonProps = useFilterBlock({
        filterState,
        items,
        initialOpen
    });
    const { handleClick, isExpanded } = talonProps;

   const list = isExpanded ? (
        <Form className={classStyle.list}>
            <FilterList
                filterApi={filterApi}
                filterState={filterState}
                name={name}
                filterFrontendInput={filterFrontendInput}
                group={group}
                items={items}
                onApply={onApply}
            />
        </Form>
    ) : null;

    return (
        <div
            data-cy="FilterBlock-root"
            aria-label={itemAriaLabel}
        >
            <Menu.Button
                className="w-full hover_bg-gray-50"
                data-cy="FilterBlock-triggerButton"
                onClick={handleClick}
                type="button"
                aria-label={toggleItemOptionsAriaLabel}
                aria-expanded={isExpanded}
            >
                    <span>{name}</span>
            </Menu.Button>
            <Transition
                as={Fragment}
                enter="transition ease-out duration-100"
                enterFrom="transform opacity-0 scale-95"
                enterTo="transform opacity-100 scale-100"
                leave="transition ease-in duration-75"
                leaveFrom="transform opacity-100 scale-100"
                leaveTo="transform opacity-0 scale-95"
            >
                <Menu.Items>
                    <div className="py-1">
                        <Menu.Item>
                            {({ isExpanded }) => (
                                <div
                                    className={classNames(
                                        isExpanded
                                            ? 'bg-gray-100 text-gray-900'
                                            : 'text-gray-700',
                                        'block px-4 py-2 text-sm'
                                    )}
                                >
                                    {list}
                                </div>
                            )}
                        </Menu.Item>
                    </div>
                </Menu.Items>
            </Transition>
        </div>

Here is my function for onClick:

import { useCallback, useState, useEffect, useMemo } from 'react';

export const useFilterBlock = props => {
    const { filterState, items, initialOpen, itemAriaLabel } = props;

    const hasSelected = useMemo(() => {
        return items.some(item => {
            return filterState && filterState.has(item);
        });
    }, [filterState, items]);

    const [isExpanded, setExpanded] = useState(hasSelected || initialOpen);

    useEffect(() => {
        setExpanded(hasSelected || initialOpen);
    }, [hasSelected, initialOpen]);

    const handleClick = useCallback(() => {
        setExpanded(value => !value);
    }, [setExpanded]);

    return {
        handleClick,
        isExpanded
    };
};

How can I create a specific onClick for each menu dropdown? Thanks for helping me. I appreaciate it a lot!!!