Hello I have this component in my react project and it contains a table with Matrial UI table , the problem is I wanrt to fix gap between columns with ‘2.8125rem’ size, I used columngap property in sx of Table but unfortunately it didn’t work, I appreciate any help:
the code is:

    return (
       
        <TableContainer
            dir="ltr"
        >
            <Table aria-label="simple table"
                
                stickyHeader
            >
                <TableHead >
                    <TableRow sx={{color:'neutral.N800'}}>
                        <TableCell sx={{ lineHeight: '1rem', fontSize: '0.6875rem', fontStyle: 'normal', fontWeight: '700', border: 'none' }} align="left">قیمت</TableCell>
                        <TableCell sx={{ lineHeight: '1rem', fontSize: '0.6875rem', fontStyle: 'normal', fontWeight: '700', border: 'none' }} align="center">حجم</TableCell>
                        <TableCell sx={{ lineHeight: '1rem', fontSize: '0.6875rem', fontStyle: 'normal', fontWeight: '700', border: 'none' }} align="center">تعداد</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.slice(0, 5).map((row, index) => (
                        <TableRow
                            key={index}
                            sx={{
                                position: 'relative',
                            }}
                        >
                            <TableCell sx={{
                                border: 'none',fontSize: '0.6875rem',
                                fontStyle: 'normal', fontWeight: '400', lineHeight: '1rem',
                                color:'neutral.N800',
                            }}
                                align="left">{row.price}</TableCell>
                            <TableCell sx={{
                                border: 'none', fontSize: '0.6875rem',
                                fontStyle: 'normal', fontWeight: '400', lineHeight: '1rem',
                                color:'neutral.N800'
                            }}
                                align="center">{row.volume}</TableCell>
                            <TableCell sx={{
                                border: 'none', fontSize: '0.6875rem',
                                fontStyle: 'normal', fontWeight: '400', lineHeight: '1rem',
                                color:'neutral.N800'
                            }}
                                align="center">{row.count}</TableCell>
                           
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
};

export default BuyTable;