how to collapse only 1 list in every click - reactjs

Question

How I can collapse only the click item?, I am using customize in material ui Customization
what I want is to show only the list of item in the select item this code will show all the list item not the list of the clicked item. I am only following the customization in the nested list in material ui and also I use the nested list it will show also the same output.
const [open, setOpen] = React.useState(false)
const handleToggle = () => {
setOpen((toggleOpen) => !toggleOpen)
}
const drawer = (
<Paper elevation={0} sx={{maxWidth: 256}}>
<StyledNav component="nav" disablePadding>
<ListItemButton component="a" href="/app/profile">
{loading ? (
<Typography>loading...</Typography>
) : data ? (
<Fragment>
<ListItemIcon
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
minHeight: 'fit-content',
padding: theme.spacing(0.5),
}}
>
<Avatar sx={useStyles.avatar} alt="User">
{getinitials(`${data.me?.lastname} ${data.me?.firstname}`)}
</Avatar>
</ListItemIcon>
<Stack>
<ListItemText
sx={{my: 0}}
primary={`${data.me?.lastname} ${data.me?.firstname}`}
primaryTypographyProps={{
fontSize: 20,
fontWeight: 'medium',
letterSpacing: 0,
}}
/>
<ListItemText
sx={{my: -1}}
primary={`${data.me?.username}`}
primaryTypographyProps={{
fontSize: 15,
fontWeight: 'medium',
letterSpacing: 0,
}}
/>
</Stack>
</Fragment>
) : null}
</ListItemButton>
<Divider />
{!loadingGetUserPagesAccess &&
dataGetUserPagesAccess &&
dataGetUserPagesAccess.userPagesAccess.map((pagegroup) => {
return (
<Fragment key={pagegroup.name}>
<List
sx={{
width: '100%',
maxWidth: 360,
bgcolor: open ? 'rgba(71, 98, 130, 0.2)' : null,
}}
subheader={<ListSubheader>{pagegroup.name}</ListSubheader>}
>
{pagegroup.pages?.map((page) => {
return (
<Fragment key={page.name}>
<ListItemButton
alignItems="flex-start"
onClick={handleToggle}
sx={{
px: 3,
pt: 2.5,
pb: open ? 0 : 2.5,
'&:hover, &:focus': {
'& svg': {opacity: open ? 1 : 0},
},
}}
disableGutters
>
<ListItemText
primary={page.name}
primaryTypographyProps={{
fontSize: 15,
fontWeight: 'medium',
lineHeight: '20px',
mb: '2px',
}}
secondaryTypographyProps={{
noWrap: true,
fontSize: 12,
lineHeight: '16px',
color: open
? 'rgba(0,0,0,0)'
: 'rgba(255,255,255,0.5)',
}}
sx={{my: 0}}
/>
<KeyboardArrowDown
sx={{
mr: -1,
opacity: 100,
transform: open ? 'rotate(-180deg)' : 'rotate(0)',
transition: '0.2s',
}}
/>
</ListItemButton>
{open &&
page.subpages &&
page.subpages.map((subpage) => {
return (
<ListItemButton
sx={{
py: 0,
minHeight: 32,
}}
>
<ListItemText
primary={subpage.name}
primaryTypographyProps={{
fontSize: 14,
fontWeight: 'medium',
}}
onClick={() => {
navigate(`/app/services${subpage.url}`)
}}
/>
</ListItemButton>
)
})}
</Fragment>
)
})}
</List>
</Fragment>
)
})}
</StyledNav>
</Paper>)
what should I do thank you..