I have been trying to at least filter a table based on some string of labels or dropdown menu items (one of them is super admin): I have tried using useEffect It filters now if i click on the super admin label. but the userRoleclicked array doesn't update when other labels are selected or deselected. instead it overwrites the array. Also in the UI, you can't click multiple items from the dropdown menu items expect one. I'm stuck and i don't know what to do

the code:

const [searchClinicianRoles, setSearchClinicianRoles] = useState<string[]>([]);

useEffect(() => {
        if (searchClinicianRoles.includes("Super admin")) {
            
            const filteredAclsByDropdown = allAcls.filter((a) => a.acl?.super_admin);
            setFilteredAcls(filteredAclsByDropdown);
        }
    }, [searchClinicianRoles, allAcls]);


------------------------------------------------------------------------------------
//for the filter button
  
  onSelectedItemsChange={(selectedItems) => {
                    
                    const userRolesClicked = selectedItems.map(
                        (selectedItem) => selectedItem.label
                    );

                    
                    setSearchClinicianRoles(userRolesClicked);
                    
                }}

this is what i am trying to achieve: