Quiero obtener JSX en un objeto (categoría encontrada) de otras categorías de archivosDetalles, usando la función de búsqueda a través de la verificación de item.title. A continuación se muestra mi código

Aquí Cómo estoy recuperando y quiero enviar datos como accesorios a un componente (CategoryDetails).

 import type { NextPage } from 'next'; import CategoryDetails from '../components/CategoryDetails.jsx' import {categoryDetails} from '../utils/categoriesDetails' const Home: NextPage = () => { let foundCategory = null; foundCategory = categoryDetails.find(function(item){ return item.title === 'Bus Plugs' }) console.log(foundCategory) return ( <> <Header /> {foundCategory ? <CategoryDetails oDetails={foundCategory.details} sTitle={foundCategory.title} /> : '' } <FooterBar/> </> ) } export default Home

y aquí está mi categoryDetails.js desde el cual estoy exportando datos de categorías (simplificado)

 export const categoryDetails = [ { title: 'Bus Plugs', details: ( <div> <ul> </ul> <img src={`${categoryImagesDir}bus-plugs-large.jpg`} /> </div> ) }, { title: 'Fuse', details: ( <div> <ul> </ul> <img src={`${categoryImagesDir}fuse-large.jpg`} /> </div> ) }

Pero cuando consuelo para verificar, obtengo el siguiente resultado en lugar del JSX real en foundCategory.details. que quiero usar en el componente secundario (CategoryDetails).

 { title: 'Bus Plugs', details: { '$$typeof': Symbol(react.element), type: 'div', key: null, ref: null, props: { children: [Array] }, _owner: null, _store: {} } }

Mirando hacia adelante, gracias