globalTypes does not work properly with Composition

Describe the bug A clear and concise description of what the bug is.

When using composition, the global toolbar options appear, but the default value is not set, when you update the value, the story doesn’t re-render. This situation is slightly improved if you create the globalType in the global storybook preview.js file, as it sets the default value, and will update the global value in the url.

Checking the Console Logs, I see:

received globals from a non-local ref. This is not currently supported.

To Reproduce Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions. Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

1. Create a Core Storybook, and a Composition Storybook
2. Define in preview.js in composition storybook.

export const globalTypes = {
  locale: {
    name: 'locale',
    description: 'Locale',
    defaultValue: 'en-NZ',
    toolbar: {
      icon: 'globe',
      items: [
        { value: 'keys', title: 'keys' },
        { value: 'en-NZ', title: 'en-NZ' },
        { value: 'zh-CN', title: 'zh-CN' },
        { value: 'ru-RU', title: 'ru-RU' },
      ],
    },
  },
};

1. Define a Story that uses globals:

const Story = (args, ctx) => {
  const locale = ctx.globals.locale;
  return <p>{locale}</p>;
};

1. Use the toolbar to update the value, notice it doesn’t update the story, and it doesn’t update the url, and it doesn’t even set the toolbar highlight.
2. Define in preview.js in core storybook.

export const globalTypes = {
  locale: {
    name: 'locale',
    description: 'Locale',
    defaultValue: 'en-NZ',
  },
};

1. Notice that now the toolbar now highlights, and the url updates, but the story does not reload.

System Please paste the results of npx sb@next info here.

npm: 7.15.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.1.0), Chromium (92.0.902.67)
  npmPackages:
    @storybook/addon-essentials: ^6.3.6 => 6.3.6
    @storybook/addon-links: ^6.3.6 => 6.3.6    @storybook/react: ^6.3.6 => 6.3.6

Additional context Add any other context about the problem here.

[tmeasday]

Perhaps there is something sensible we can do in the case that a set of global types is identical in both the composing and composed storybook? We might not need to address the fullblown problem of what happens when they are different in that case?

[WilliamABradley]

So I think what is missing is some method of synchronising the global state between the composed and host storybook. The only way to synchronise them at the moment is to refresh the page.