Fast Refresh not working on nextjs index file

Question

I'm trying to practice with React and I am following a guide that is using NextJS. Things are working fine but when I try to test the supposed Fast Refresh, it's not working. The project just has the Package.json/Lock, my index.js file that is inside a pages folder and of course the node_modules.

My index.js is pretty simple:

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
  const [likes, setLikes] = useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      <Header title="Develop. Preview. Ship. " />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}

and the installs are pretty simple, all I did was:

npm install react react-dom next

with the dependencies being:

"dependencies": {
    "next": "^13.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.6"
  }

Not sure what's wrong, it seems to be working fine when I run the server, the script is pretty much

"dev": "next dev"

Most solutions seem to talk about other components not being referred to with proper capitalization but this is just a single file so I'm not sure what's going on, could be something I've installed locally/globally? For the record, before I did this setup, I had the normal index.html with the React, React Doc, and Babel script tags and that was reloading just fine. But when I got to the Nextjs set up now it can't seem to do it anymore.