Type ‘undefined’ is not assignable to type ‘menuItemProps[]’

I am working on next.js 15 project using typescript. The goal is to create nested Navigation.
When I run npm run dev it compiles correctly but when I try to build the project I am getting the following error:

Type error: Type 'menuListProps | undefined' is not assignable to type 'menuItemProps[]'.                                               
  Type 'undefined' is not assignable to type 'menuItemProps[]'.

  90 |                                  <li key={id}>                                                                                   
  91 |                                          <h2>{title}</h2>                                                                        
> 92 |                                          <MenuContent subMenuItems={subMenuItems} />                                             
     |                                                       ^                                                                          
  93 |                                  </li>                                                                                           
  94 |                          </>                                                                                                     
  95 |                  )  

data for menu:

const menuItems = [

    {
        id:getRandomInt(maxIntegerRandom),
        title:"a",
        subMenuItems: [
        {
            id:getRandomInt(maxIntegerRandom),
            title:"a1",
            subMenuItems: [
            {
                id:getRandomInt(maxIntegerRandom),
                title:"a11",
            },
            {
                id:getRandomInt(maxIntegerRandom),
                title:"a12",

            },
            ],
        },
        {
            id:getRandomInt(maxIntegerRandom),
            title:"a2",
            subMenuItems: [
            {
                id:getRandomInt(maxIntegerRandom),
                title:"a21",
            },
            ],
        },  
        ]

    }
]

types definitions:

type menuListProps = {
    passedMenuItems: menuItemProps[];
}

type menuItemProps = {
    id: number;
    title: string;

    shortTitle?: string;
    description?: string;
    shortDescription?: string;
    path?: string;
    image?: string;
    icon?: string;

    hideForHamburgerMenu?: boolean;

    subMenuItems?: menuListProps;
}

components:

function MenuContent(props: menuListProps){

    const { passedMenuItems } = props;

    let toRender = null;

    toRender = passedMenuItems.map( (menuItem) => MenuItem(menuItem) )

    return (
        <>
            <ul>
                {toRender}
            </ul>
        </>
    )
}

function MenuItem (props: menuItemProps){
    const { id, path, title, subMenuItems, hideForHamburgerMenu } = props;

    if (!("hideForHamburgerMenu" in props && hideForHamburgerMenu))
    {
        if ("subMenuItems" in props)
            return (
                <>
                    <li key={id}>
                        <h2>{title}</h2>
                        <MenuContent passedMenuItems={subMenuItems} />
                    </li>
                </>
            )

        else 
            return (

                <li key={id}>
                    <h2>{title}</h2>
                </li>
            )
    }
}

default function:

export default function MobileAsideMainMenu(){
    return(
        <>
            <MenuContent passedMenuItems={menuItems} />
        </>
    )
}

Please help me investigate what am I doing wrong?