Accordeon [React] [Sass]

Buenos días community would love suggestions on how to make the clsx classes better as I know there's code repetition but couldn't grasp how to make the following (written inside the Context):

const summaryClasses = clsx({
    flex: true,
    "space-between": true,
    "align-items-center": true,
    "details-gap": true,
    heading: true,
  });

  const summaryClassesBold = clsx({
    flex: true,
    "space-between": true,
    "align-items-center": true,
    "details-gap": true,
    heading: true,
    bold: true,
  });

Here's the code on the component. It should be bold if the condition is satisfied, if not it should have all the summaryClasses:

        <summary
          className={
            active[0] === item.id ? summaryClassesBold : summaryClasses
          }
        >

I tried to do the ternary inside the clsx (inside the Context) but then it bugged as the item.id is identified only in the component.

In one way or the other, glad to finish it, as it took more time than expected.

Saludos from Brazil :)