Hey, I made an app with nextjs 14 and i18n for translation.
I want to fetch the dictionary in the parent element and give it then to the child component. But I need the intellisense from that dictionary in the child component as I get it like in the parent component:

Parent.tsx:

export default async function BecomePresenter({ lang }: { lang: Locale }) {

    const { containers } = await getDictionary(lang);

    const component = containers.landingPage;

    console.log(typeof await getDictionary(lang));
    

    return (
        <main className="container">
            <Hero components={component} />
        </main>
    );
};

Child.tsx

export default async function Hero<T extends object>({ components }: { components: T }) {
    return (
        <section>
        </section>
    );
};

dictionaries.ts

import 'server-only';
import type { Locale } from '@/i18n.config';

const dictionaries = {
    de: () => import('@/dictionaries/de.json').then(module => module.default),
    en: () => import('@/dictionaries/en.json').then(module => module.default)
};

export const getDictionary = async (locale: Locale) => dictionaries[locale]();

i18n.config.,ts

export const i18n = {
    defaultLocale: 'de',
    locales: ['de', 'en']
} as const;

export type Locale = (typeof i18n)['locales'][number];

And I want this intellisense like in the picture