Make other block disappear when chose multiple values

How can I make other filter button disappear when picked 1 (or multiple) value in same filter block.

Here is my code base:

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 classStyle = useStyle(defaultClasses, props.classes);
const ref = useRef(null);

useEffect(() => {
    const handleClickOutside = event => {
        if (ref.current && !ref.current.contains(event.target)) {
            isExpanded && handleClick();
        }
    };
    document.addEventListener('click', handleClickOutside, true);
    return () => {
        document.removeEventListener('click', handleClickOutside, true);
    };
}, [isExpanded]);

const list = isExpanded ? (
    <Form>
        <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}
        ref={ref}
    >
        <Menu.Button
            data-cy="FilterBlock-triggerButton"
            type="button"
            onClick={handleClick}
            aria-label={toggleItemOptionsAriaLabel}
        >
            <div>
                <span>
                    {name}
                </span>
                <svg
                    width="8"
                    height="5"
                    viewBox="0 0 8 5"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M6.97291 0.193232C7.20854"
                        fill="currentColor"
                    />
                </svg>
            </div>
        </Menu.Button>
        <div>
            <div>
                {list}
            </div>
        </div>
    </div>
);
};

I am trying to achieve when I chose 1 value or more than 1 value inside filter block the other block will disappear but right now I achieved that when I chose 1 value the other filter block disappear but when I chose another value in the same block the other filter block appear again. Anyone have idea how can I work on this?

I am using React and Redux for this project

Thank you for helping me on this!!!!

Update:

Added parent component for FilterBlock.ks:

const FilterSidebar = props => {
    const { filters, filterCountToOpen } = props;
    const [selectedGroup, setSelectedGroup] = useState(null);
    const talonProps = useFilterSidebar({ filters });
    const {
        filterApi,
        filterItems,
        filterNames,
        filterFrontendInput,
        filterState,
        handleApply,
        handleReset
    } = talonProps;

    const filterRef = useRef();
    const classStyle = useStyle(defaultClasses, props.classes);

    const handleApplyFilter = useCallback(
        (...args) => {
            const filterElement = filterRef.current;
            if (
                filterElement &&
                typeof filterElement.getBoundingClientRect === 'function'
            ) {
                const filterTop = filterElement.getBoundingClientRect().top;
                const windowScrollY =
                    window.scrollY + filterTop - SCROLL_OFFSET;
                window.scrollTo(0, windowScrollY);
            }

            handleApply(...args);
        },
        [handleApply, filterRef]
    );

    const result = Array.from(filterItems)
        .filter(
            ([group, items]) =>
                selectedGroup === null ||
                selectedGroup === filterNames.get(group)
        )
        .map(([group, items], iteration) => {
            const blockState = filterState.get(group);
            const groupName = filterNames.get(group);
            const frontendInput = filterFrontendInput.get(group);

            return (
                <FilterBlock
                    key={group}
                    filterApi={filterApi}
                    filterState={blockState}
                    filterFrontendInput={frontendInput}
                    group={group}
                    items={items}
                    name={groupName}
                    onApply={(...args) => {
                        console.log('args: ', ...args);
                        setSelectedGroup(prev =>
                            prev !== null ? null : groupName
                        );
                        return handleApplyFilter(...args);
                    }}
                    initialOpen={iteration < filterCountToOpen}
                    iteration={iteration}
                />
            );
        });

    return (
        <div className="container px-4 mx-auto">
            <Menu
                as="div"
                className="my-16 justify-center flex flex-wrap py-5 border-y border-black border-opacity-5"
            >
                {result}
            </Menu>
        </div>
    );
};