react-table won't load data from json

I want to display data using react table and fetching that data but data won't display.

here's where i'm placing the JSON file

then , i fetch from component table and get the data to the table.

const IGD = () => {
  const [data, setData] = useState([]);
  
  function fetchData() {
    fetch('data.json', { headers: {'Content-Type': 'application/json', 'Accept': 'application/json' }  }).
    then((res) => res.json())
    .then((datajson) => {
      console.log(datajson)
      setData(datajson)
    }
    )
  }

  useEffect(() => {
      fetchData();
  }, [])

  const columns = useMemo(
    () => [
      {
        Header: "No RM",
        columns: [
          {
            accessor: 'data.no_rm'
          }
        ]
      },
      {
        Header: "Nama Lengkap",
       开发者_Python百科 columns: [
          {
            accessor: "data.nama_lengkap"
          },
        ]
      },
      {
        Header: "Umur",
        columns: [
          {
            accessor: "data.umur"
          },
        ]
      },
      {
        Header: "Dokter",
        columns: [
          {
            accessor: "data.dokter"
          },  
        ]
      },
      {
        Header: "Petugas Registrasi",
        columns: [
          {
            accessor: "data.petugas_registrasi"
          },  
        ]
      },
      {
        Header: "Jenis Pasien",
        columns: [
          {
            accessor: "data.jenis_pasien"
          },  
        ]
      },
      {
        Header: "Status",
        columns: [
          {
            accessor: "data.status"
          },  
        ]
      }, {
        Header: "Pengaturan",
        columns: [
          {
            accessor: "data.pengaturan"
          },  
        ]
      }
    ],
  );

  return (
    <div>
        <StyledTable>
            <Table columns={columns} data={data}></Table>
        </StyledTable>
    </div>
  )

}

here's my react table code

import React from 'react';
import { useTable } from 'react-table';
export default function Table({ columns, data }) {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({
        columns, data
    });
return (
    <table {...getTableProps()}>
        <thead>
            {headerGroups.map(headerGroup => (
                <tr { ...headerGroup.getHeaderProps }>
                    {
                        headerGroup.headers.map((column) => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))
                    }
                </tr>
            ))}
        </thead>
        <tbody {...getTableBodyProps()}>
            {
                rows.map((row, i) => {
                    prepareRow(row);
                    return (
                        <tr {...getTableBodyProps()}>
                            {
                                row.cells.map(cell => {
                                    return <td { ...cell.getCellProps() }>{cell.render('Cell')}</td>
                                })
                            }
                        </tr>
                    )
                })
            }
        </tbody>
    </table>
)

}

also. here's my json.

    [
    {
        "no_rm": 14141,
        "nama_lengkap": "arief kurniawan",
        "umur": 20,
        "dokter": "dr richard",
        "petugas_registrasi":"Agus Riyadhi",
        "jenis_pasien": "pasien_baru",
        "status": "sudah diperiksa",
        "pengaturan": "Lihat Detail"
    }
]

and data not load to table.

i don't have any idea , i've been tried other ways to fetching but always results the same. Any help will be appreciated. Thankyou.

Write your function asynchronous by this way -

async function fetchData() {
  const res = await fetch('data.json', 
    { headers: {'Content-Type': 'application/json', 'Accept': 
      'application/json' }  
    })
  setData(res.json())
 }

and render the table after the data has been load by putting the simple check

{data && <Table columns={columns} data={data}></Table> }