me sale el error no puedo leer la propiedad de indefinido usando reaccionar y mecanografiado?

¿Qué estoy tratando de hacer?

tengo un parentComponent dentro del cual hago una consulta para obtener algunos datos "itemData". y pase este itemData al ChildComponent.

en childComponent obtengo una propiedad de itemData que está disponibleItems y la paso a Seleccionar opciones de menú.

a continuación se muestra el código,

 const ParentComponent = () => { const itemData = useItemDataQuery(); return ( <ChildComponent itemData={itemData.data}/> ); } const ChildComponent =(itemData: any) => { const options = react.useMemo(() => { //error here const output = itemData && itemData[0].availableItems; return output; } }, [itemData]); return ( <SelectMenu options ={options} value="hello"/> );

}

itemData es una matriz de objetos como a continuación

 const itemData = [ { name: 'name1', availableItems: [ 'Item1', 'Item2', ], } ]

estoy accediendo a elementos disponibles con itemData && itemData[0].disponibleItems pero sigo dando un error.

¿Alguien podría ayudarme a solucionar esto? Gracias.

EDITAR:

He intentado como a continuación

 const options = react.useMemo(() => { if (itemData && itemData.length > 0) { const output = itemData[0].availableItems; return output; } } }, [itemData]); this works. but under SelectMenuComponent the prop options shows error "no overload matches this call. Type Maybe<string>[]|undefined|null is not assignable to type . return ( <SelectMenu options ={options} value="hello"/> //error here );

Podría alguien ayudarme con esto. Gracias.