TOC

// index.tsx
    <Box sx={styles.itemsContainer}>
      {headings.map((item) => (
        <Box key={item.slug}>
          <Item
            title={item.title}
            slug={item.slug}
            level={1}
            active={item.slug === activeItem.item}
          />
          <Box
            sx={styles.subItemsContainer(
              item.slug === activeItem.item,
              item.children.length
            )}
          >
            {item.children.map((subItem) => (
              <Item
                key={subItem.slug}
                title={subItem.title}
                slug={subItem.slug}
                level={2}
                active={subItem.slug === activeItem.subItem}
              />
            ))}
          </Box>
        </Box>
      ))}
    </Box>

// styles.ts
const subItemsContainer: (
  active: boolean,
  subItemsCount: number
) => SxStyleProp = (active, subItemsCount) => {
  return {
    ml: '16px',
    overflow: 'hidden',
    borderLeft: '1px solid #E7E9EE',
    // maxHeight: active ? `${subItemsCount * 40}px` : '0',
    transform: active ? 'scaleY(1)' : 'scaleY(0)',
    transition: 'transform 0.3s ease-in-out',
  }
}