Vue 3 router changing <routing-view/> but not URL

Question

I'm having a problem with routing in my vue project, vue-router is working in the <router-view /> but isn't changing the URL.

Here is what my main.js looks like:

import { createApp } from "vue";
import { createMemoryHistory, createRouter } from "vue-router";
import App from "./App.vue";
import EditComponent from "./components/EditComponent/EditComponent.vue";
import LoginComponent from "./components/LoginComponent/LoginComponent.vue";

import "./styles/main.scss";

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: "/", name: "Login", component: LoginComponent },
    { path: "/edit", name: "Edit", component: EditComponent },
  ],
});

createApp(App).use(router).mount("#app");

App.vue

<template>
  <router-link to="/">Login</router-link>
  <router-link to="/edit">Edit</router-link>
  <router-view />
</template>

If I press any <router-link> it shows the corresponding component but does not change the URL. And if I go to http://localhost:5173/edit it incorrectly shows the Login component. Essentially the URL is not working whatsoever for routing, but the router itself is.

For context this Vue project was made with Vite and is in a frontend folder of a git repo (I have a node.js server in a backend). Also the reason why I have components separated into folders is because I prefer to have the scripts separated from the <template>

I am getting no console errors. I have looked at many Vue routing tutorials to see if there is something I'm missing but I cant find any problems. I have not been able to find any similar situation either.