I have a Table component that is nested in a Grid component and I would like the Grid component to remain in its width when my Table component is rendered. My current code causes the Grid component to expand but I’m not sure how to prevent this? I’m pretty stuck :/

Before rendering the Table component when it has not received data:

After rendering the Table component when it received data:

Here are my codes from parent to child

Mainpage

    return (
        <Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "40px"}}>
                <Typography variant="h4">Some Header</Typography>
            </Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "30px"}}>
                <Wallet></Wallet>
            </Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "40px"}}>
                <Typography variant="h5">Some Other Header</Typography>
            </Box>
            <Box sx={{display: "grid", alignItems: "center", justifyContent: "center", paddingTop: "10px"}}>
                <Cmc></Cmc>
            </Box>
            
        </Box>
    )

Wallet

return (
        <Box>
            <Grid container rowSpacing={2} sx={{paddingInline: "25px"}} width={"100%"}>
                <Grid item xs={12}>
                    <Queryfield text={fields.staking} onFunction={getStakingAmounts}/>
                    <Stakingfield resData={resData.stakingRes}/>
                </Grid>
                <Grid item xs={12}>
                    <Queryfield text={fields.outstandingWithdrawals} onFunction={getOutstandingWithdrawals}/>
                    <Outstandingfield/>
                </Grid>
                <Grid item xs={12}>
                    <Queryfield text={fields.withdrawnAmounts} onFunction={getWithdrawnAmount}/>
                    <Withdrawnfield/>
                </Grid>
            </Grid>
        </Box>
    )

Queryfield

    return (
        <Box>
            <Typography sx={{ paddingLeft: "0px" }}>{txt}</Typography>
            <Box sx={{display: "inline-flex", width: "100%"}}>
                <TextField onChange={handleQueryChange} label="Enter Address" fullWidth type="search" variant="filled" size="small" />
                <Button variant="outlined" onClick={handleQuery}>Send</Button>
            </Box>
        </Box>
    )

Stakingfield

    const renderTable = () => {
        if (stakingRes !== "") {
            return (
                <TableContainer component={Paper}>
                <Table size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell>Validator Address</TableCell>
                            <TableCell>Delegated Amount</TableCell>
                            <TableCell>Token</TableCell>
                            <TableCell>Shares</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {stakingRes.map((row, index) => (
                            <TableRow key={index}>
                                <TableCell component="th" scope="row">{row.validatorAddress}</TableCell>
                                <TableCell>{Number(row.delegatedAmount) / 10**18}</TableCell>
                                <TableCell>{row.denom}</TableCell>
                                <TableCell>{Number(row.shares) / 10**18}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
            );
        }
        else {
            return (
                <div></div>
            )
        }
    }

    return (
        <Box>
            {renderTable()}
        </Box>
    )