React fullpageJS and react-router-dom

I am trying to use react fullpageJS and react router dom to create a carousel but it shows empty screen, Here's the code I am using: APP.JS:

import { Route, Routes } from "react-router-dom";
import Navigation from "./routes/navigation/navigation.component";
import Home from "./components/home/home.component";

function App() {
  const About = () => {
    return (
      <div>
        <h1>This is about</h1>
      </div>
    );
  };
  return (
    <div>
      <Routes>
        <Route path="/" element={<Navigation />}>
          <Route index element={<Home />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

Home.jsx:

import { useState, useEffect, React } from "react";
import ProjectPreview from "../project-preview/project-preview.component";
import ReactFullpage from "@fullpage/react-fullpage";
// import "fullpage.js/vendors/scrolloverflow";
import PROJECTS_DATA from "../../Projects";
const Home = () => {
  const [projectsToPreview, setProjects] = useState([]);
  useEffect(() => {
    setProjects(PROJECTS_DATA);
  }, []);
  <ReactFullpage
    render={() => {
      return (
        <ReactFullpage.Wrapper>
          <ReactFullpage.Wrapper>
            {projectsToPreview.map((project) => {
              return (
                <div className="section" key={project.id}>
                  <h1>Test</h1>
                  <ProjectPreview project={project} />
                </div>
              );
            })}
          </ReactFullpage.Wrapper>
        </ReactFullpage.Wrapper>
      );
    }}
  />;
};
export default Home;

The rendered screen shows only the navbar component but the content in the slider appear neither on the screen nor in the javascript dom

index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
reportWebVitals();

Navigation.jsx

import { Link, Outlet } from "react-router-dom";
import { Nav, Navbar } from "react-bootstrap";

const Navigation = () => {
  return (
    <>
      <Navbar expand="lg" variant="dark">
        <Link className="navbar-brand" to="/">
          LOGO
        </Link>

        <Nav className="ms-auto">
          <Link className="nav-link" to="/about">
            About
          </Link>
        </Nav>
      </Navbar>

      <Outlet />
    </>
  );
};

export default Navigation;