Chakra UI Dashboard navbar

import Navbar from '@/components/navbar/NavbarAdmin';
import { routes } from '@/components/routes'; 
import { EssayBody, OpenAIModel } from '@/types/types';
import { Database } from '@/types_db';
import { getActiveRoute } from '@/utils/navigation';
import { useDisclosure } from '@chakra-ui/react';
import { Session, User } from '@supabase/supabase-js';
import { usePathname } from 'next/navigation';
import React from 'react';
 
type Subscription = Database['public']['Tables']['subscriptions']['Row'];
type Product = Database['public']['Tables']['products']['Row'];
type Price = Database['public']['Tables']['prices']['Row'];
interface ProductWithPrices extends Product {
  prices: Price[];
}
interface PriceWithProduct extends Price {
  products: Product | null;
}
interface SubscriptionWithProduct extends Subscription {
  prices: PriceWithProduct | null;
}
interface Props {
  .........................
}
const DashboardLayout: React.FC<Props> = (props: Props) => {
  const pathname = usePathname();
  const [open, setOpen] = React.useState(false);
 
  return (
    ..................... 
          <Navbar
            onOpen={onOpen}
            logoText={'Essay Builder AI'}
            userDetails={props.userDetails}
            session={props.session}
            user={props.session?.user}
            products={props.products}
            subscription={props.subscription}
            // @ts-ignore
            brandText={getActiveRoute(routes, pathname)}
          />
      .................... 
  );
};
 
export default DashboardLayout;