I am trying to sort an object alphabetically in react/javascript in a java application Im not sure how to do it and i keep getting the same error.

Here is the function code and i am trying to sort both build and catalog objects

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

what i have tried that throws errors

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.

im at a loss on how to sort alphabetically. Thanks in advance