custom accordion in Mui Nextjs and mui - css

Question

there is quite a new component introduced in #mui/lab which is Masonary which deals with accordions on the sidebar but not the one I posted above. so far I have achieved
import React from 'react';
import IconButton from '#mui/material/IconButton';
import FavoriteIcon from '#mui/icons-material/Favorite';
import Devider from '#mui/material/Divider';
import ExpandMoreIcon from '#mui/icons-material/ExpandMore';
import { styled } from '#mui/material/styles';
import { css } from '#emotion/react';
import { Rating, Paper, Card, Box, CardHeader, CardContent, CardMedia, CardActions, Toolbar, Typography, Collapse } from '#mui/material';
const ExpandMore = styled((props) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));
const DropDownPaperSection = ({ Pages, error }) => {
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
if (error) {
return <div className={style.Container} >An error occured: {error.message}</div>;
}
return (
<>
<Toolbar sx={{ bgcolor : '#f4f4f8'}}>
{Pages.data.map(Pages => (
//<div classname={style.main}>
<Box key={`$Pages.id`} variant='outlined' spacing={2 } elevation={1} style={{ margin: "16px 0px", border: "1px solid black" }}
css={css`
color: #20b2aa;
:hover {
color: #2e8b57;
}
`}>
{/* {Pages.attributes.Title}
{Pages.attributes.createdAt}
*/}
<Box>
<Typography variant="body2" color="text.secondary" className="hover:bg-violet-300">
{Pages.attributes.Title}</Typography>
</Box>
<Box enableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</Box>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Typography paragraph padding="10px">
<Box sx={{ my: 8, spacing: 10, margin: 2 }} key={`$Pages.id`}> {Pages.attributes.Description} </Box></Typography>
<Devider />
<Box sx={{ my: 8, spacing: 10, margin: 2 }} key={`$Pages.id`}> {Pages.attributes.Content} </Box>
</Collapse>
</Box>
))} </Toolbar>
</>
)
}
export default DropDownPaperSection
But I am stuck with detaching those two elements as seen in the picture.
if you need you may find the rest of the code in github is there any possible way to achieve the closest one? I am not very sure how can i proceed next to detach this accordion. Maybe I am missing very evil details to detach them.
EDIT :
if we somehow use the portal and update the component it comes out as a combined section of multiple rows of data But not the desired output that I want.
```..........
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Portal container={container.current} key={`$Pages.id`}>
<Typography paragraph padding="10px">
<Box sx={{ my: 8, spacing: 10, margin: 2 }} key={`$Pages.id`}> {Pages.attributes.Description} </Box></Typography>
<Devider />
<Box sx={{ my: 8, spacing: 10, margin: 2 }} key={`$Pages.id`}> {Pages.attributes.Content} </Box>
</Portal>
</Collapse>
<Box sx={{ p: 1, my: 1, border: '1px solid' }} key={`$Pages.id`} ref={container} />
</Box>
))} </Toolbar>
</React.Fragment> ```