Cannot read properties of undefined (reading 'children') using reactjs

how I implement custom sort for columns that have render cell field? for example I have multiple data that has status Active and InActive, I want to sort it if the user click the header and i want to display it with design, status active color green and if the status is Inactive the font color is red

export default function App() {
  const classes = useStyles();
  const header = [
    { field: "id", headerAlign: "left", headerName: "ID", hide: true },
    {
      field: "username",
      headerAlign: "left",
      headerName: "Username",
      width: 250,
      sortable: true
    },
    {
      field: "email",
      headerAlign: "left",
      headerName: "Email",
      width: 230,
      sortable: true
    },
    {
      field: "status",
      headerName: "Status",
      width: 100,
      cellClassName: (params) =>
        clsx("super-app", {
          active: params.formattedValue.trim() === "Active",
          inactive: params.formattedValue.trim() !== "Active"
        }),
      valueFormatter: ({ value }) =>
        value.props.children.trim() === "Active"
          ? `${value.props.children.trim()}`
          : "InActive"
    }
  ];
  return (
    <div className={classes.root}>
      <DataGrid rows={rows} columns={header} />
    </div>
  );
}

example data

const rows = [
  {
    id: 1,
    username: "Silvestr Irma",
    email: "SilvestrIrma@gmail.com",
    status: "Active"
  },
  {
    id: 2,
    username: "Iruma",
    email: "Iruma@gmail.com",
    status: "Active"
  },
  {
    id: 3,
    username: "HeroidiasMetody",
    email: "HeroidiasMetody@gmail.com",
    status: "InActive"
  }
];

current code https://codesandbox.io/embed/mutable-microservice-qi6olw?fontsize=14&hidenavigation=1&theme=dark