Customized details component

CustomDetails.tsx

const CustomDetails = (props: CustomDetailsProps) => {
  const { icons, name, renderTree } = props;
  const [isOpen, setIsOpen] = useState(false);

  const hasIcons = icons && icons.length > 0;

  const handleDrawerOpen = (
    e: React.SyntheticEvent<HTMLDetailsElement, ToggleEvent>,
  ) => {
    // This stops event bubbling;
    e.stopPropagation();
    setIsOpen(e.nativeEvent.newState === "open" ? true : false);
  };

  return (
    <StyledDetails onToggle={handleDrawerOpen} hasIcons={hasIcons}>
      <summary className={hasIcons ? "custom-icons" : undefined}>
        {hasIcons && (isOpen ? icons[1] : icons[0])}
        <span>{name}</span>
      </summary>
      {renderTree}
    </StyledDetails>
  );
};