Material-UI Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p> - reactjs

Question

I'm using Material UI and I get this error when I click on Collapse cmp (Material UI) which is inside a table:
validateDOMNesting(...): <p> cannot appear as a descendant of <p>. **
I saw same topic but with Typography which I didn't use.
I have no idea if the problem is the Collapse cmp or the element inside it
Here is the code:
import React from 'react'
import KeyboardArrowDownIcon from '#material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '#material-ui/icons/KeyboardArrowUp';
import TableCell from '#material-ui/core/TableCell';
import TableRow from '#material-ui/core/TableRow';
import IconButton from '#material-ui/core/IconButton';
import Collapse from '#material-ui/core/Collapse';
import Box from '#material-ui/core/Box';
import classes from './post.module.scss'
import Button from '#material-ui/core/Button';
export default function PostRow(props) {
const { row, delatePost, loadProfile, fromProfile } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow onClick={() => setOpen(!open)} style={{ borderBottom: 'unset', cursor: 'pointer' }}>
<TableCell>
עוד
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
<TableCell align="right">{row.name}</TableCell>
<TableCell align="right" component="th" scope="row">
{row.businessField}
</TableCell>
<TableCell align="right">{row.followers}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0, }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box margin={0}>
<div className={classes.about}>
<h4>קצת על העסק</h4>
<p>{row.aboutBusiness}
<h4>דרישות</h4>
<p>{row.requirements}</p>
</p>
{fromProfile &&
<Button variant="contained" color="secondary" style={{marginBottom: '15px'}} onClick={async () => {
await delatePost(row._id)
loadProfile()
}}>מחק פוסט</Button>
}
</div>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}

Answer 1

thanks guys i will read the articles :) meanwhile I just removed the P element and its working great.