<p><pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react"; import axios from "axios"; import io from "socket.io-client"; import { DataGrid } from "@mui/x-data-grid"; import NaveBar from "../NaveBar/NaveBar"; import SideBar from "../SideBar/SideBar"; import "./NewsTable.scss"; const socket = io("http://localhost:5000/"); const NewsTablee = () => { const [news, setNews] = useState([]); //update news deeebd useEffect(() => { const fetchData = async () => { try { const allnews = await axios.get("http://localhost:5000/api/news"); setNews(allnews.data.Date); } catch (error) { console.log(error); } }; socket.on("updateNewsTable", () => { fetchData(); }); }, [news]); useEffect(() => { axios .get("http://localhost:5000/api/news") .then((s) => { setNews(s.data.Date); }) .catch((er) => { console.log(er); }); }, []); const message = () => { socket.emit("a news updated", "a news updated"); }; const columns = [ { field: "_id", headerName: "no", flex: 0.5, renderCell: (params) => { console.log(params.row.Index 1); // add this line return <div>{(params.row.index 1).toString()}</div> ; }, }, { field: "Title", headerName: "Title", flex: 3, sortable: true }, { field: "createdAt", headerName: "createdAt", flex: 2 }, { field: "UserName", headerName: "UserName", flex: 1 }, { field: "Resurce", headerName: "Resurce", flex: 1 }, { field: "Language", headerName: "Language", flex: 1 }, { field: "ProtectionLevel", headerName: "Protection Level", flex: 1 }, { field: "priority", headerName: "Priority", flex: 1 }, { field: "Media", headerName: "Media", flex: 1 }, ]; return ( <> <NaveBar /> <SideBar /> <div className='content-wrapper' style={{ minHeight: "1172.56px" }}> <div className='NewsTableContainer'> <div className='headrt'> <button onClick={message} style={{ height: 30, width: 30 }}></button> </div> <div style={{ height: "570px", width: "100%" }} className='newsTable'> <DataGrid rows={news} columns={columns} getRowId={(row) => row._id} sortModel={[{ field: "createdAt", sort: "desc" }]} /> </div> </div> </div> </> ); };</pre> <p>Export default NewsTablee;}</p> <p>The return line number is nan</p>

{
      field: "_id",
      headerName: "no",
      flex: 0.5,
      type: 'number', valueGetter: (params) =>  `${params.row.index + 1}`
    },