Import Error States File is outside of src/ folder when the file is for sure really inside of src/

I was attempting to build a practice project to learn Redux. I'm getting an error message saying that the file I'm importing is outside of src/ but the file is for sure located inside of src/. I've tried changing my folder structure, migrating my code to a new React App and the error proceeds. I really just want to understand the source of this error so that I can avoid it in the future.

The error message, screenshot of my folder structure is below. I've also included the Users component where the import error occurs.

Thank you for your time!

Error Message:

Compiled with problems:X

ERROR in ./src/Users.js 4:0-43

Module not found: Error: You attempted to import ../FakeData.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

    import {createSlice} from '@reduxjs/toolkit';
    import { UsersData } from '../FakeData.js';
    
    export const userSlice = createSlice({
            name: 'users',
            initialState: {value: UsersData },
            reducers: {
                addUser: (state, action) => {
                    // Write code for adding a user 
                }
            },
            
        }
    );
    
    export default userSlice.reducer;