Fetch Data from JSON File and render in custom JSX component using .map() method -Next JS

I'm new to NextJs, trying to fetch objects from JSON and render them inside a custom component created inside a function as a react component. And the JSON file is correctly imported in the main js file, what I mean is, when I try to render the JSON object list inside the main file with .map() method, it returns an object instead of an array. I don't find what mistake I've done. May you look at the code bellow

Here is my JSON file

[
{
    "id":1,
    "avatar":"https://randomuser.me/api/portraits/men/1.jpg",
    "nom":"Rafaly Georges",
    "mail":"[email protected]",
    "dept":"Logistique",
    "status":"active"
},
{
    "id":2,
    "avatar":"https://randomuser.me/api/portraits/men/1.jpg",
    "nom":"Rajean Paul",
    "mail":"[email protected]",
    "dept":"Infrastructure",
    "status":"active"
},
{
    "id":3,
    "avatar":"https://randomuser.me/api/portraits/women/1.jpg",
    "nom":"Belmondique",
    "mail":"[email protected]",
    "dept":"Logistique",
    "status":"active"
}

]

And my react code

 import React from 'react';
    import { BiTrashAlt,BiEdit } from 'react-icons/bi';
    import data from '../../database/data.json';

export default function UserTableList() {
  return (
    <table className="min-w-full table-auto mx-auto ">
    <thead>
      <tr className="bg-gray-800">
        <th className="px-16 py-2">
          <span className="text-gray-200">Nom</span>
        </th>
        <th className="px-16 py-2">
          <span className="text-gray-200">Email</span>
        </th>

        <th className="px-16 py-2">
          <span className="text-gray-200">Departement/Titre</span>
        </th>

        <th className="px-16 py-2">
          <span className="text-gray-200">Activité</span>
        </th>

        <th className="px-16 py-2">
          <span className="text-gray-200">Action</span>
        </th>
      </tr>
    </thead>
    <tbody className="bg-gray-200">



/*THE PROBLEM IS HERE, I want to map data from a *data* object in a JSON file but an error comes out  data is the JSON object that should be mapped as an array here */

      {
         data.map(data=>{
          return(
            <Tr key={data.id} id={data.id} nom={data.nom} avatar={data.avatar} mail={data.mail} dept={data.dept} status={data.status}></Tr>
          )
        })
     
      }
    </tbody>
  </table>
  )
}

  function Tr(id, nom, avatar, mail,dept, status){
  return(
    <tr className="bg-gray-50 text-center">
    <td className="px-16 py-2">
      <img src={avatar||'#'} alt="" />
      <span>{nom||'inconu'}</span>
    </td>
    <td className="px-16 py-2  ">
      <span>{mail||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <span>{dept||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <button className="cursor">
        <span className="bg-green-500 text-white px-5 py-1 rounded-full">
        {status||'indéfini'}
        </span>
      </button>
    </td>
    <td className="px-16 py-2  flex justify-around gap-5 items-center">
      <button className="cursor">
        <BiEdit size={25} color={"gray"}></BiEdit>
      </button>
      <button className="cursor">
        <BiTrashAlt size={25} color={"red"}></BiTrashAlt>
      </button>
    </td>
  </tr>
  );
}

The error says that:

 Server Error
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
renderNodeDestructiveImpl
file:///C:/Users/Arotiana's/intravak/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6179:11)

I understand this but I thought that the .map method used with JSON objects returns an array. I'm totally confused. Help would be very appreciated