Dynamic title for additionalActions action in Canvas

[Kegulf]

Summary

I'm making a custom reusable Canvas in my project called ControllabeCanvas and I have added an additionalAction to toggle a Controls block. I want the title to change the same way as the "Show Code" Action does for consistancy in the view, but I cannot for the love of me figure out how to do it 😅

My component:

export const ControllableCanvas: FC<ControllableCanvasProps> = ({
  of,
  githubUrl,
  figmaUrl,
}) => {
  const [isControlsOpen, setIsControlsOpen] = useState(false);
  const toggleControls = useCallback(() => setIsControlsOpen((prev) => !prev), []);

  const additionalActions: ActionItem[] = [];
  additionalActions.push({
    title: isControlsOpen ? 'Hide Controls' : 'Show Controls',
    onClick: toggleControls,
  });
  if (githubUrl) additionalActions.push(getOpenInGithubAction(githubUrl));
  if (figmaUrl) additionalActions.push(getOpenInFigmaAction(figmaUrl));

  return (
    <>
      <Canvas of={of} additionalActions={additionalActions} withToolbar/>
      <div className={`${classes.collapse} ${isControlsOpen ? classes.collapseOpen : classes.collapseClosed}`}>
        <Controls of={of} />
      </div>
      <style jsx>{styles}</style>
    </>
  );
};

Additional information

This is latest Storybook (8.4.7)

Create a reproduction

No response