Pass prop conditionally in react while handling routing

Question

In React app, I render various components following app.tsx rendering. I would like to know if there is a possible way to pass such prop as an optional while managing routes. I get below error. This error occurs in code below in app.tsx when I try to apply conditional passing of prop within routes.map() in else condition.

Property 'onContinueAsGuest' is missing in type '{}' but required in type 'ComplaintLandingPageProps'.ts(2741)

ComplaintLandingPage.tsx(8, 5): 'onContinueAsGuest' is declared here.

(property) component: React.FC<ComplaintLandingPageProps> | (() => JSX.Element)

Here is my code and what I tried.

import "@abgov/web-components";
import routes from "../routes";
import {
  BrowserRouter as Router,
  Route,
  Routes,
  useLocation,
} from "react-router-dom";
import { AppHeader } from "shared/src/lib/app-header";
import { AppFooter } from "shared/src/lib/app-footer";
import { useAuthContext } from "shared/src/lib/context";
import { AppSideMenu } from "shared/src/lib/app-side-menu";
import styles from "./app.module.scss";
import { GoAOneColumnLayout } from "@xxx/react-components";
import { useState } from "react";
import ComplaintLandingPage from "./pages/ComplaintLandingPage";
interface AppLayoutProps {
  isGuest: boolean;
  children: React.ReactNode;
}
const AppLayout: React.FC<AppLayoutProps> = ({ isGuest, children }) => {
  const location = useLocation();
  const isLandingPage = location.pathname === "/";
  const { isAuthenticated } = useAuthContext();
  return (
    <div className={styles["main-container"]}>
      {" "}
      {!isLandingPage && !isGuest && (
        <div className="side-menu">
          {" "}
          <AppSideMenu
            basePath=""
            items={[
              {
                type: "group",
                header: "Personal",
                icon: "person",
                items: [
                  { type: "link", header: "Personal information", href: "#" },
                  { type: "link", header: "Account history", href: "#" },
                  {
                    type: "group",
                    header: "Privacy complaint",
                    items: [
                      { type: "link", header: "File a complaint", href: "#" },
                      { type: "link", header: "Complaint history", href: "#" },
                    ],
                  },
                ],
              },
              {
                type: "group",
                header: "Business",
                icon: "briefcase",
                items: [
                  { type: "link", header: "Business information", href: "#" },
                ],
              },
              {
                type: "group",
                header: "Settings",
                icon: "settings",
                items: [
                  { type: "link", header: "Security settings", href: "#" },
                ],
              },
            ]}
          />{" "}
        </div>
      )}{" "}
      {children}{" "}
    </div>
  );
};
export function App(): JSX.Element {
  const [isGuest, setIsGuest] = useState(false);
  const handleContinueAsGuest = () => {
    setIsGuest(true);
  };
  return (
    <>
      {" "}
      <Router basename={process.env.NX_PUBLIC_BASE_HREF?.replace(/\/+$/, "")}>
        {" "}
        <GoAOneColumnLayout>
          {" "}
          <section slot="header">
            {" "}
            <AppHeader />{" "}
          </section>{" "}
          <Routes>
            {" "}
            <Route
              path="/"
              element={
                <ComplaintLandingPage
                  onContinueAsGuest={handleContinueAsGuest}
                />
              }
            />{" "}
            <Route
              path="*"
              element={
                <AppLayout isGuest={isGuest}>
                  {" "}
                  <Routes>
                    {" "}
                    {routes.map((route) => {
                      return (
                        <Route
                          key={route.path}
                          path={route.path}
                          element={
                            route.path === "/" ? (
                              <ComplaintLandingPage
                                onContinueAsGuest={handleContinueAsGuest}
                              />
                            ) : (
                              <route.component />
                            )
                          }
                        />
                      );
                    })}{" "}
                  </Routes>{" "}
                </AppLayout>
              }
            />{" "}
          </Routes>{" "}
          <section slot="footer">
            {" "}
            <AppFooter />{" "}
          </section>{" "}
        </GoAOneColumnLayout>{" "}
      </Router>{" "}
    </>
  );
}
export default App;

Here I am looking for an alternative when I don't have to or need to pass props to other components.

Below is the code where in I pass prop after initial rendering of app.tsx.

interface ComplaintLandingPageProps {
    onContinueAsGuest: () => void | undefined;
}

export const ComplaintLandingPage: React.FC<ComplaintLandingPageProps> = ({ onContinueAsGuest }) => {
    const navigate = useNavigate();

    const handleGuestNavigate = () => {
        onContinueAsGuest();
        navigate('/file-complaint');
    };

    return ()
};