I am getting the Uncaught Error: Renderer Error when I try to render a table in react using react-table hook

Question

I am quite new to development and just started with react. I have implemented a react-table and when rendered it in the App.js file but then I open the browser it does not render anything and gives an error in the console This is the snapshot of the error I also tried the Error Boundry method to see if it helps but it didn't

BasicTable.js

import { useTable } from "react-table";
import Mockdata from "./Mockdata.json";
import { Columns } from "./Columns";
export const BasicTable = () => {


  const columns = useMemo(() => Columns,[]);
  const data = useMemo(() => Mockdata,[]);
  const tableInstance = useTable({ columns, data });
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    tableInstance;

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render('cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};
------------------------------------------------------
Mockdata.json

[
    {
        "id":"1a",
        "name":"Prop1",
        "defaultValue":"P1"
    },
    {
        "id":"2a",
        "name":"Prop2",
        "defaultValue":"P2"
    },
    {
        "id":"3a",
        "name":"Prop3",
        "defaultValue":"P3"
    }
]
------------------------------------------------------------
Columns.js

export const Columns = [
    {
        Header:'Id',
        accessor: 'id'
    },
    {
        Header:'Name',
        accessor: 'name'
    },
    {
        Header:'DefaultValue',
        accessor: 'defaultValue'
    }
]

---------------------------------------------------------
App.js

import React from 'react';
import './App.css';
import { BasicTable } from './components/BasicTable';

function App() {
  return (
    <div className="App">
     
      <BasicTable></BasicTable>
    </div>
  );
}

export default App;

Answer 1

include the Cell as capital c in which u rendered small c in return that might help