Blank Page in react I have searched stackovwerflow but found nothing

Question

can anyone help me react is giving blank page when I render feed before Router its showing feed but inside router no component is working it was working fine but suddenly some issue arised and i guess ot is due to route i tried to downgrade react-router-dom it didnt work import React from "react";

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";

import Feed from "./Components/Feed"; 
import {AuthProvider} from "./AuthProvider"
function App() {
  return (
  <>
   {/* <Feed /> */}
  <Router>
    <AuthProvider>
      <Routes>
        <Route path="/" element={<Feed />}></Route>
      </Routes>
    </AuthProvider>
  </Router>
</>
  );
}

export default App; package.json: { "name": "instagram-clone", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.11", "@mui/material": "^5.11.15", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "firebase": "^9.8.0", "firebase-tools": "^11.25.1", "pure-react-carousel": "^1.30.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }