How to stick the last column and add scrolling effect?

Question

I want to stick last column and add scrolling effect in react mui table.

I want last column to stick and previous 2 3 column will be scrollable.

I have used material ui table and react js for that.

This is my mui table code:

<TableContainer
        sx={{
          mt: "32px",
          height: "383px",
          overflowX: "scroll",
        }}
        component={Paper}
      >
        <Table stickyHeader aria-label="caption table">
          <TableHead>
            <TableRow>
              <TableCell className={classes.tableHead}>Merchant name</TableCell>
              <TableCell className={classes.tableHead}>Merchant ID</TableCell>

              <TableCell className={classes.tableHead}>
                Transaction ID
              </TableCell>
              <TableCell className={classes.tableHead}>PG ID</TableCell>
              <TableCell className={classes.tableHead}>Order No</TableCell>
              <TableCell className={classes.tableHead}>Amount</TableCell>
              <TableCell className={classes.tableHead}>
                Transaction Fee
              </TableCell>
              <TableCell className={classes.tableHead}>
                Aggregator Fee
              </TableCell>
              <TableCell className={classes.tableHead}>Reseller fee </TableCell>
              <TableCell className={classes.tableHead}>Paymode </TableCell>
              <TableCell className={classes.tableHead}>
                <Grid
                  container
                  direction={"row"}
                  justifyContent={"space-between"}
                >
                  Transaction date
                  <Image
                    className={classes.filter}
                    src={Filer}
                    alt={"filterIcon"}
                  />
                </Grid>
              </TableCell>
              <TableCell
                sx={{ position: "sticky", right: 0, background: "white" }}
                className={classes.tableHead}
              >
                Status
              </TableCell>
            </TableRow>{" "}
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.Merchantname} onClick={toggleModalOpen}>
                <TableCell component="th" scope="row">
                  {row.Merchantname}
                </TableCell>
                <TableCell component="th" scope="row">
                  {row.MerchantID}
                </TableCell>
                <TableCell>{row.TransactionID}</TableCell>
                <TableCell>{row.PGID}</TableCell>
                <TableCell>{row.OrderNo}</TableCell>
                <TableCell>{row.Amount}</TableCell>
                <TableCell>{row.TransactionFee}</TableCell>
                <TableCell>{row.AggregatorFee}</TableCell>
                <TableCell>{row.ResellerFee}</TableCell>
                <TableCell>{row.Paymode}</TableCell>
                <TableCell>{row.Transactiondate}</TableCell>
                <TableCell
                  sx={{ position: "sticky", right: "0", background: "white" }}
                >
                  {row.Status}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>