Netlify and React Vite: Netlify says “Page not found” upon reloading in Vite and React site

I have the site built in React JS where I am using Vite as a JS Bundler. The problem is, when I deployed the site on Netlify and when reloading the page it says “Page not found”.

I tried adding changing vite.config.jsfile.

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
      },
    },
  },
  plugins: [react()],
});

I also added .redirects file.

Please provide a solution for this, I see this as a common issue but it hasn’t been addressed much.