Display Fetched Data from API in react and display in responsive table?

Question

I try to make a responsive table to display fetched data from API in react.js. I designed a table but it is not responsive.

<TableContainer >
      <Table aria-label="customized table">
        <TableHead>
          <TableRow>
            <StyledTableCell align="right">Name</StyledTableCell>
            <StyledTableCell align="right">Photo</StyledTableCell>
            <StyledTableCell align="right">Price</StyledTableCell>
            <StyledTableCell align="right">Quentity</StyledTableCell>
            <StyledTableCell align="right">Sold</StyledTableCell>
            <StyledTableCell align="right">Supplier</StyledTableCell>
            <StyledTableCell align="right">Manage</StyledTableCell>
            

          </TableRow>
        </TableHead>
        <TableBody>
        {myproducts.map(product=>
            <StyledTableRow >
              <StyledTableCell align="right">{product.name}</StyledTableCell>
              <StyledTableCell align="right"><img className='tableimage' src={product.img} alt="" /></StyledTableCell>
              <StyledTableCell align="right">{product.price}</StyledTableCell>
              <StyledTableCell align="right">{product.quantity}</StyledTableCell>
              <StyledTableCell align="right">{product.sold}</StyledTableCell>
              <StyledTableCell align="right">{product.supplier}</StyledTableCell>
              <StyledTableCell align="right">
              <div class="col-sm">
     <button onClick={() => navigateToProductDetail(product._id)} className='btn btn-dark text-light border-light rounded-0 '>
    <FontAwesomeIcon icon={faPenSquare} /></button>
 
    <button  onClick={() => handleDelete(product._id)} className='btn btn-dark border-light  text-light rounded-0'>
    <FontAwesomeIcon icon={ faTrash} /></button>

    </div>   
                  </StyledTableCell>
              
            </StyledTableRow>
          )}
        </TableBody>
      </Table>
    </TableContainer>

this table is designed with material UI to display API fetch data but this table is not responsive.It only display the fetch data.