Page always reloads when Form submission, also with fetcher.Form

[rancid swan]

loader and action in the notes Route:

export async function loader() {
const notes = await getStoredNotes();
return notes;
}

export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData();

const noteData = {
title: formData.get('title'),
content: formData.get('content'),
id: new Date().toISOString(),
} as NoteType;

if (noteData.title.trim().length < 5) {
return { message: 'Title must be at least 5 characters long' };
}

const existingNotes = await getStoredNotes();
const updatedNotes = existingNotes.concat(noteData);
await storeNotes(updatedNotes);
//await new Promise((resolve) => setTimeout(() => resolve(true), 2000));
return redirect('/notes');
}

vite.config.js (tried with flags and without already)

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

declare module "@remix-run/node" {
interface Future {
//v3_singleFetch: true;
}
}

export default defineConfig({
plugins: [
remix({
future: {
//v3_fetcherPersist: true,
//v3_relativeSplatPath: true,
//v3_throwAbortReason: true,
//v3_singleFetch: true,
//v3_lazyRouteDiscovery: true,
},
}),
tsconfigPaths(),
],
});

tsconfig.json

{
"include": [
"/*.ts",
"/.tsx",
"/.server//.ts",
"/.server//.tsx",
"/.client//.ts",
"/.client//.tsx"
],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["@remix-run/node", "vite/client"],
"isolatedModules": true,
"esModuleInterop": true,
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"target": "ES2022",
"strict": true,
"allowJs": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"~/": ["./app/*"]
},

// Vite takes care of building everything, not tsc.
"noEmit": true

}
}

[tribal moth]

I was following max's tut for remix and I am also facing the same issue. Any luck resolving this issue?