'Catálogo' no se puede utilizar como un componente JSX. Su tipo de retorno 'CatalogState' no es un elemento JSX válido. Al tipo 'CatalogState' le faltan las siguientes propiedades del tipo 'ReactElement<any, any>': type, props, keyts(2786)

aquí el catálogo es mi componente envolvente ESTA ES LA PARTE DE LA RUTA DONDE ESTOY UTILIZANDO EL CATÁLOGO COMO COMPONENTE ENVOLVENTE

 <Routes> {/* <Route path={BASE}/></Catalog> */} {/* <Route path={BASE} element={<PrimeCatalogContainer/>} /> */} <Route path={BASE} element={()=>(<Catalog><PrimeCatalogContainer/></Catalog>)}/> <Route path={PRIME_CATALOG} element={<PrimeCatalogContainer />} /> <Route path={PRIME_TRAINING} element={<PrimeTrainingPage />} /> <Route path={PRIME_INSTANCE} element={<PrimeInstancePage />} /> <Route path={PRIME_ALMPROFILE} element={<ALMProfilePage />} /> <Route path={PRIME_BOARDPAGE} element={<PrimeCommunityBoardPage />} /> <Route path={PRIME_BOARDLIST} element={<PrimeCommunityBoardList />} /> </Routes>

COMPONENTE DEL CATÁLOGO

 import { PrimeCatalogContainer } from "./almLib"; const Catalog = () =>{ return( <> <div className="catalog_container" data-show-filters="true" data-show-search="true" data-catalogs="true" data-lo-types="true" data-skill-name="true" data-lo-format="true" data-duration="true" data-price="true" data-skills-level="true" data-learner-state="true" data-tag-name="true" data-skill-level="true"><PrimeCatalogContainer/> </div> </> ); };

en lugar del componente de catálogo anterior, probé debajo de uno también

 import { PrimeCatalogContainer } from "./almLib"; function Catalog (): JSX.Element { return( <div className="catalog__container" data-show-filters="true" data-show-search="true" data-catalogs="true" data-lo-types="true" data-skill-name="true" data-lo-format="true" data-duration="true" data-price="true" data-skills-level="true" data-learner-state="true" data-tag-name="true" data-skill-level="true" ><PrimeCatalogContainer/></div> ); };