Untitled

const SectionItem = ({ level = 0, section }: SectionItemProps) => {
  const [published, setPublished] = useState(section.isPublished);
  return (
    <>
      <ListItem divider={level === 3 ? false : true} disablePadding>
        <ListItemButton sx={{ pl: level * 2 }}>
          <ListItemIcon onClick={() => setPublished(!published)} sx={{ minWidth: '35px' }}>
            {published ? <Visibility /> : <VisibilityOff />}
          </ListItemIcon>
          <ListItemText primary={section.title} />
        </ListItemButton>
      </ListItem>
      {section.subsections &&
        section.subsections.length > 0 &&
        level++ &&
        section.subsections.map((subsection) => <SectionItem key={section.id} section={section as SectionModel} level={level} />)}
    </>
  );
};