Collapse Table changing layout - reactjs

Question

I'm using Material-UI to build a table that collapses after add more than 3 rows, but it changes its layout when open the collapsed table.
[enter image description here][1]
Creating rows
createRowFrame=(array,num)=>{
return array.map(frameObject=>{
return(
<MuiThemeProvider theme={theme}>
<TableRow key={frameObject.frame.id} style={num===2?{backgroundColor:"#F1D3D3"}:{}}>
<TableCell>1</TableCell>
<TableCell>{frameObject.frame.name}{frameObject.hipsterFrame !== null && (" / "+frameObject.hipsterFrame.name)}</TableCell>
<TableCell><DeleteIcon className={this.props.classes.icon} onClick={()=>{this.props.removeOneFrame(frameObject.frame.id)}}/></TableCell>
</TableRow>
</MuiThemeProvider>
)
})
}
Creating the Collapse Table (conditionaly)
createTablePart=(frameArray, brand)=>{
var remainingCredit = this.props.credits[brand+"Credit"] - frameArray.length
var allowedFrames
var overFrames
if(remainingCredit<0){
allowedFrames = frameArray.slice(0,this.props.credits[brand+"Credit"])
overFrames = frameArray.slice(this.props.credits[brand+"Credit"], frameArray.length)
} else {
allowedFrames=frameArray
overFrames=[]
}
console.log(allowedFrames)
console.log(overFrames)
if(frameArray.length>3){
const {classes, t} = this.props;
return(
<React.Fragment>
<MuiThemeProvider theme={theme}>
<TableRow onClick={()=>this.handleClickOpen(brand+"Open",this.state[brand+"Open"])}>
<TableCell>{frameArray.length}</TableCell>
<TableCell>{brand.toUpperCase()}</TableCell>
<TableCell>{this.state[brand+"Open"] ? <ExpandLess /> : <ExpandMore />}</TableCell>
</TableRow>
<Collapse in={this.state[brand+"Open"]} timeout="auto" unmountOnExit>
<div className={classes.collapsedTable}>
{this.createRowFrame(allowedFrames,1)}
{this.createRowFrame(overFrames,2)}
</div>
</Collapse>
</MuiThemeProvider>
</React.Fragment>
)
} else {
return (
<React.Fragment>
{this.createRowFrame(allowedFrames,1)}
{this.createRowFrame(overFrames,2)}
</React.Fragment>
)
}
}
I expected the table just collapse but still obey the columns.

Answer 1

I think you could avoid using Collapse completely and just conditionally show your new rows programmatically. For example, you would replace this part of your code:
<Collapse in={this.state[brand+"Open"]} timeout="auto" unmountOnExit>
<div className={classes.collapsedTable}>
{this.createRowFrame(allowedFrames,1)}
{this.createRowFrame(overFrames,2)}
</div>
</Collapse>
with:
this.state[brand+"Open"] && <>{Here put your new created row without the div }</>
The syntax is probably incorrect but I think this may be of some help.