reactjs – React JS. Trying to display data from a local JSON file

I am quite new in learning React and now I am trying to implement some dynamic filters on a locat data set and I am stuck at displaying data from my local file.

Data entries look like this:

I was trying to use the fetch() API but for some reason the data is not displayed on the page. Most probably I am not reffering correct to the right attributes.

`
import data from ‘../file2.json’
import React, { useEffect, useState } from “react”;

const Planner = () => {
const [user, setUser] = useState([]);

const fetchData = () => {
    return fetch(data)
          .then((response) => response.json())
          .then((data) => setUser(data));
}

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

return (<main>
    <h1>Restaurant List</h1>
    <ul>
      {user && user.length > 0 && user.map((userObj, index) => (
          <li key={userObj.restaurant.R.res_id}>{userObj.name}</li>
        ))}
    </ul>
  </main>
)

};

export default Planner;`