import * as React from "react";
import { DataGridPro, GridToolbar } from "@mui/x-data-grid-pro";
import { useDemoData } from "@mui/x-data-grid-generator";
import hindi from "./hindi.json";
import eng from "./eng.json";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

export default function DataGridProDemo() {
  const { data } = useDemoData({
  dataSet: "Commodity",
  rowLength: 100000,
  editable: true
 });
 const [currentLanguage, setcurrentLanguage] = React.useState("En");

const handleChange = (event) => {
  setcurrentLanguage(event.target.value);
};

 return (
   <div style={{ height: 520, width: "100%" }}>
     <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
      <InputLabel id="demo-simple-select-label">Lang</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={currentLanguage}
        label=" "
        onChange={handleChange}
      >
        <MenuItem value={"En"}>En</MenuItem>
        <MenuItem value={"Hi"}>Hi</MenuItem>
      </Select>
    </FormControl>
  </Box>
  <DataGridPro
    components={{
      Toolbar: GridToolbar
    }}
    {...data}
    localeText={currentLanguage === "En" ? eng : hindi}
    loading={data.rows.length === 0}
    rowHeight={38}
    checkboxSelection
    disableSelectionOnClick
  />
  </div>
  );
 }

Here's the sandbox Link. Change the language and click on cell to see the change. Re-render happens on state change from en to hi and yet not reflected in UI until something is clicked inside grid https://codesandbox.io/s/datagridprodemo-material-demo-forked-6rovb