I know that the way of adding a Checkbox or TextField is by using renderCell and it works, I can see the Checkboxes:

However, I don't understand how I'm supposed to then control each row's Checkbox/TextField individually. Like, what if I want row 1 to have a "filled" variant of the TextField and row 2 to have an "outlined" variant.

import * as React from "react";
import {DataGrid} from "@mui/x-data-grid";
import {Box, Checkbox, TextField} from "@mui/material";

const columns = [
  {field: "id", headerName: "ID", width: 30},
  {field: "col1", headerName: "Column 1", width: 150},
  {field: "col2", headerName: "Column 2", width: 150},
  {field: "col3", headerName: "Column 3", width: 150, renderCell: (params) => },
];

const rows = [
  {id: 1, col1: "Example", col2: "Content", col3: ??????},
  {id: 2, col1: "Example", col2: "Content", col3: ??????},
  {id: 3, col1: "Example", col2: "Content", col3: ??????},
];

export default function Table() {
  return (
    
      
    
  );
}

I tried adding a new with props inside like but of course, that doesn't work.