Javascript – Error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Im making a User Management System where I need to filter the user from a json file, which I have locally. The problem is I can’t fetch the json file and I get this error in console:
Error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

The json is located in src/data/data.json
Userlist.jsx is located in src/components/UserList
store.js is located in src/store/store/your textjs

This is the UserList.jsx,where the json is fetched but the data isn’t showing on the Page:

import React, { useEffect , useState} from 'react'
import { useDispatch,useSelector } from 'react-redux'
import { setUsers } from '../store/store'
import UserCard from './UserCard'
import Pagination from './Pagination'



const UserList = () => {

    const dispatch = useDispatch();
    const users = useSelector((state) => state.users.users)
    const [currentPage, setCurrentPage] = useState(1);
    const usersPerPage = 20;
    

    useEffect(() => {
        fetch('../data/heliverse_mock_data.json')
            .then((res) => res.json())
            .then((jsonData) => {
                dispatch(setUsers(jsonData))
            })
            .catch((err) => {
                console.error('Error', err)
            })
    }, [dispatch])





    const handlePageChange = (pageNumber)=>{
        setCurrentPage(pageNumber)
    }

    const indexOfLastUser = currentPage * usersPerPage
    const indexOfFirstUser = indexOfLastUser - usersPerPage
    const currentUsers = users.slice(indexOfFirstUser, indexOfLastUser)
    const totalPages = Math.ceil(users.length / usersPerPage)
    

    return (
        <div className=' grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-8'>

            {currentUsers.map((user) => (
                <UserCard key={user.id} user={user} />
            ))}
            <Pagination totalPages={totalPages} onPageChange={handlePageChange}/>
        </div>
    )

}


export default UserList

This is store.js of redux-toolkit:

import { configureStore, createSlice } from '@reduxjs/toolkit';


const initialState = {
    users: [],
    searchQuery: '',
    domainFilter: '',
    genderFilter: '',
    availabilityFilter: '',
    paginationPage: 1,
    teamMembers: [],
    totalPages: 0
};

const userSlice = createSlice({
    name: 'users',
    initialState,
    reducers: {
        setUsers: (state, action) => {
            state.users = action.payload;
        },
        setSearchQuery: (state, action) => {
            state.searchQuery = action.payload
        },
        setDomainFilter: (state, action) => {
            state.domainFilter = action.payload
        },
        setGenderFilter: (state, action) => {
            state.genderFilter = action.payload;
        },
        setAvailabilityFilter: (state, action) => {
            state.availabilityFilter = action.payload
        },
        setPaginationPage: (state, action) => {
            state.paginationPage = action.payload
        },
        addToTeam: (state, action) => {
            state.teamMembers.push(action.payload)
        },
        removeFromTeam: (state, action) => {
            state.teamMembers = state.teamMembers.filter(
                (user) => user.id !== action.payload
            )
        }
    }
})



const store = configureStore({
    reducer: {
        users: userSlice.reducer
    },
});

export const { setUsers, setSearchQuery, setDomainFilter, setGenderFilter, setAvailabilityFilter, setPaginationPage , addToTeam , removeFromTeam} = userSlice.actions

export default store;

I tried validating the json file thinking maybe the json file might be corrupted but this isn’t the case. I might be thinking maybe the file location directory in fetch() is wrong in my code .