Idk all the details on design system naming convention, but seems weird that text (which I perceive as "foreground") has a color with "background" in the name?

Could be totally fine and defer to you because you have much more context, but figured I'd leave a note.

Could be simplified w/ ternary if you want, totally up to you

const modalContent = React.useMemo(
  () => (activeStep === 'settings' ? subchannelSettings : subchannelMembers),
  [activeStep, subchannelMembers, subchannelSettings],
);