onItemSelect

eslint-disable react-hooks/rules-of-hooks 

IconPicker

() => {
  const { referenceRef, referenceProps, PopoverContent, open, setOpen } = usePopover();

  const Example = useMemo(
    () =>
      ({ onClose }: { onClose: () => void }) => {
        const { addSnackbar } = useSnackbar();
        return (
          <IconPicker
            onItemSelect={({ category, color, name }) => {
              onClose();
              if (category === 'Icons') {
                const Icon = getAgentIcon(name);
                addSnackbar({
                  message: (
                    <Box display="flex" alignItems="center" gap="$8">
                      {Icon && <Icon color={color} />}
                      {category} {name} {color}
                    </Box>
                  )
                });
              } else if (category === 'Emojis') {
                addSnackbar({
                  message: (
                    <Box display="flex" alignItems="center" gap="$8">
                      {name} {category}
                    </Box>
                  )
                });
              }
            }}
          />
        );
      },
    []
  );

  return (
    <Snackbar max={5}>
      <Button ref={referenceRef} {...referenceProps} aria-current={open}>
        Open
      </Button>
      <PopoverContent>
        <Example onClose={() => setOpen(false)} />
      </PopoverContent>
    </Snackbar>
  );
}

Icon Picker component

In Popover