Реакт ругается на context

Реакт ругается на точку, так же на value , все делаю как в курсе, но у меня выдает такую ошибку, в чем проблема ? (скопировал с курса весь файлик где выдает ошибку, но все равно ошибка не пропала)

весь код:

import { createContext, ReactNode, useState } from 'react';
import { MenuItem } from '../interfaces/menu.interface';
import { TopLevelCategory } from '../interfaces/page.interface';

export interface IAppContext {
    menu: MenuItem[];
    firstCategory: TopLevelCategory;
    setMenu?: (newMenu: MenuItem[]) => void;
}

export const AppContext = createContext<IAppContext>({ menu: [], firstCategory: TopLevelCategory.Courses });

export const AppContextProvider = ({ menu, firstCategory, children }: IAppContext & { children: ReactNode }): JSX.Element => {
    const [menuState, setMenuState] = useState<MenuItem[]>(menu);
    const setMenu = (newMenu: MenuItem[]) => {
        setMenuState(newMenu);
    };

    return <AppContext.Provider value={{ menu: menuState, firstCategory, setMenu }}>
        {children}
    </AppContext.Provider>;
};