I created a new next 13 project.
There are no errors but when i make changes to my code the changes do not show up unless i stop the development server and restart it.
when i do that i get a fast refresh warning.

- warn Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

i have refactored all my components from anonymous functions to named functions and to start with the following syntax:
export default function Items() {} as suggested in stackoverflow
the picture attached is what my directory looks like.
I have also deleted both the .next folder and node_modules folder
reinstalled using npm i but the problem still persists.
please help.

PS: The navbar.js component imports the searchbar.js component. and the navbar.js component is imported in the admin.js page.

Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way.

i feel the above excerpt from the docs is where the problem lies but i don't understand nor know how to go about it.
Please this is a very teachable moment for me and i would like to understand why this is going on.