reactjs - איך להעביר רכיב Nextjs עם תכונות מותאמות אישית כילדים

להוסיף מאפיין Auth לרכיבים שלי. יצרתי ממשק

interface AuthAppProps extends Omit<AppProps, "Component"> {
  Component: AppProps["Component"] & { Auth: boolean };
}

כדי שאוכל לבצע

const App: React.FC<AuthAppProps> = (props) =>{
  const {
    Component,
    pageProps: { session, ...pageProps },
  } = props;
  return (
    <SessionProvider session={session}>
      {Component.Auth ? (
        <AuthGuard>
          <Component {...pageProps} />
        </AuthGuard>
      ) : (
        <Component {...pageProps} />
      )}
    </SessionProvider>
  );
}

אני רוצה להעביר את הלוגיקה של הבדיקה הזו לרכיב אחר שהוא

const AuthProvider: React.FC<AuthProviderProps> = (
  props: AuthProviderProps
) => {
  const { children: Component } = props;

  if (Component.Auth) {
    return <AuthGuard>{Component}</AuthGuard>;
  } else {
    return <>{Component}</>;
  }
};

כדי שאוכל לעשות

 <SessionProvider session={session}>
      <AuthProvider>
        <Component {...pageProps} />
      </AuthProvider>
    </SessionProvider>

אבל מכיוון ש-<Component {...pageProps} /> מועבר רק כ-React Element ולא כסוג המותאם אישית שלי. זה נותן לי שגיאה ש

Type 'Element' is not assignable to type '(NextComponentType<NextPageContext, any, {}> & { Auth: boolean; }) & ReactNode'

איך אני יכול לגשת ל-Auth עבור הקומפוננטה שלי כשמעבירים אותה כילדים? זה אפשרי?

עדכון

interface AuthProviderProps{
    children: AuthAppProps
}