how can I toggle items in a list in javascript?

I write the toggleSelectedItems function but it did not work correctly and I could not solve the problem.

when I click on add button, I want to send the items that are in candidateItems to selectedGroups and if I click on add all, the all items in groups are added to selectedGroups.if I click on remove, the items that are in candidateItems are removed from selectedGroups . I want when I send the items to the toggleSelectedItems function, if they exist, they will be removed from the selectedGroups state, and if they don’t exist, they will be added. the items should be add to the related group. the groupId of items are equal to id of each group in selectedGroups.how can I fix the toggleSelectedItems function?

for example

const groups =[
    {
        "title": "Clusters",
        "id": "clusters",
        "items": [
            {
                "id": 1,
                "label": "cluster1",
                "groupId": "selected-clusters"
            },
            {
                "id": 2,
                "label": "cluster2",
                "groupId": "selected-clusters"
            }
        ]
    },
    {
        "title": "Rigs",
        "id": "rigs",
        "items": [
            {
                "id": 1,
                "label": "rig1",
                "groupId": "selected-rigs"
            },
            {
                "id": 2,
                "label": "rig2",
                "groupId": "selected-rigs"
            },
            {
                "id": 3,
                "label": "rig3",
                "groupId": "selected-rigs"
            }, 
        ]
    }
]
const selectedGroups=[
    {
        "title": "Selected Clusters",
        "id": "selected-clusters",
        "items": []
    },
    {
        "title": "Selected Rigs",
        "id": "selected-rigs",
        "items": []
    }
]

const candidateItems=[
    {
        "id": 1,
        "label": "cluster1",
        "groupId": "selected-clusters"
    },
    {
        "id": 2,
        "label": "cluster2",
        "groupId": "selected-clusters"
    }
]

my code :

 type GroupType = {
  title: string
  id: string
  items: GroupItemType[]
}

 type GroupItemType = {
  id: string | number
  label: string
  groupId: string | number
}

const [groups, setGroups] = useState<GroupType[]>([])
const [selectedGroups, setSelectedGroups] = useState < GroupType[] > ([])
const [candidateItems, setCandidateItems] = useState < GroupItemType[] > ([])

 const toggleSelectedItems = useCallback(
    (toggleItems: GroupItemType[]) => {
      setSelectedGroups((prevGroups) =>
        prevGroups.map((group) => {
          const groupToggleItems = toggleItems.filter(
            (toggleItem) => toggleItem.groupId === group.id
          )

          if (groupToggleItems.length === 0) return group

          const itemExists = groupToggleItems.some((toggleItem) =>
            group.items.some((item) => item.id === toggleItem.id)
          )

          const updatedItems = itemExists
            ? group.items.filter(
                (item) =>
                  !groupToggleItems.some(
                    (toggleItem) => toggleItem.id === item.id
                  )
              )
            : [...group.items, ...groupToggleItems]

          return { ...group, items: updatedItems }
        })
      )
    },
    [selectedGroups]
  )
  
  const add = useCallback(() => {
    toggleSelectedItems(candidateItems)
    setCandidateItems([])
  }, [candidateItems])
  
  const addAll = useCallback(() => {
    const allItems = groups.flatMap((item) => item.items)
    toggleSelectedItems(allItems)
  }, [groups])
 
  const remove = useCallback(() => {
    toggleSelectedItems(candidateItems)
    setCandidateItems([])
  }, [candidateItems])
 
  const removeAll = useCallback(() => {
    const allItems = selectedGroups.flatMap((item) => item.items)
    toggleSelectedItems(allItems)
  }, [selectedGroups])