Estoy tratando de ordenar un objeto alfabéticamente en react/javascript en una aplicación Java. No estoy seguro de cómo hacerlo y sigo recibiendo el mismo error.

Aquí está el código de la función y estoy tratando de ordenar los objetos de compilación y catálogo

 import React, { useContext } from 'react' import DetailHeader from '../detailHeader/DetailHeader' import style from './installedOptions.scss'; import { MainContext } from '../../../Context'; import Grid from '../../common/grid/Grid'; function InstalledOptions() { const dsContext: any = useContext(MainContext) const build = dsContext.dsState.installedOptions.premiumPlus; const catalog = dsContext.dsState.installedOptions.premium; return ( <div className={style.header} id="installedOptions"> <DetailHeader heading="INSTALLED OPTIONS" /> { build.header && <div className={style.grid}> <Grid header={[build.header]} tableData={[build.details]} /> <Grid header={[catalog.header]} tableData={[catalog.details]} /> </div> } </div> ) } export default InstalledOptions

lo que he probado que tira errores

 const sortedCatalog = [...catalog ] sortedCatalog.sort((a, b) => { if (a.name < b.name) { return -1; } if (a.name > b.name) { return 1; } return 0; }); // console.log(sortedCatalog)

error

 bundle.js:27 TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

No sé cómo ordenar alfabéticamente. Gracias por adelantado