Next JS Link tag correctly adding to browser url stack but page cannot be found

I am building an app for a friend with next js (TS) 13 and currently in my header component I have a <Link> tag that redirects to a login page. Here is the code in the header component,

"use client"
import React, { useState } from "react"
import { createContext } from "react"
import { motion } from "framer-motion"
import { AiFillHome } from "react-icons/ai"
import { MdOutlineLightMode, MdOutlineDarkMode, MdLightMode, MdDarkMode } from "react-icons/md"
import { RiComputerLine, RiComputerFill } from "react-icons/ri"
import { CgProfile, CgLogOut } from "react-icons/cg"
import Link from "next/link"

const HeaderContext = createContext({})

type Props = {}

export default function Header({}: Props) {
    const [theme, setTheme] = useState("computer") {/* used for clicking between icons */}
    return (
    {/* rest of code is here but functionality is fine */}
    <header className = "sticky top-0 bg-[#FFFFFF] p-5 flex items-start justify-between mx-auto z-20 xl:items-center">
        <motion.div 
        initial = {{
            x: 500,
            opacity: 0,
            scale: 0.5
        }}
        animate = {{
            x: 0,
            opacity: 1,
            scale: 1
        }}
        transition = {{
            duration: 1.0
        }}
        className = "flex flex-row items-center cursor-pointer">
            <Link href = {"/login"}>
                <button className = "heroButton">Sign In</button>
            </Link>
        </motion.div>
    </header>
  )
}

Now in the ./app directory I have a page.tsx which displays this component and another file called login.tsx. What happens when I click on this sign in button when I run the app is the url of the local server changes to localhost:3000/login which I believe should be the correct url tag that should point to the login.tsx file in the ./app directory. Here is a picture of the directory hierarchy as well:

I have no clue what exactly is happening. I wanted to see if something is wrong with my development environment so I created a brand new next js app with npx create-next-app@latest --ts and yet the issue still persists. I looked at a similar issue posted here and the issue with that user seemed to be with the casing difference between the file name and the href value. Also before I forget this is my login page code,

import React from "react"

type Props = {}

export default function Login({}: Props) {
  return (
    <div>
      <p>This is a test for the login page.</p>
    </div>
  )
}

Changing the function name to match the href value also did nothing sadly

EDIT: Here are some of the steps I have tried to resolve the issue. I cleared the cache of my current browser, used a completely different browser. Deleted my ./node_modules folder and package-lock.json file and recompiled them with npm install.

I believe when you want to open a new page you should add all of your pages in the pages folder.
try to create a folder called "pages", then add your "login.tsx" in there.
If you are using custom routing or have made modifications to the default routing behavior, ensure that the "/login" route is properly handled.