[addon/viewport] defaultViewport is not applied

[theKashey]

Describe the bug
Same as #1548 - defaultViewport is not applied

To Reproduce

• Create two stories
• configure defaultViewport for one story
• Sometimes (rarely) defaultViewport will be applied, but usually not.

System

    @storybook/addon-essentials: ^6.3.1 => 6.3.1 
    @storybook/addons: ^6.1.21 => 6.3.2 
    @storybook/react: ^6.3.1 => 6.3.1

Additional context
It's literally "not applied", something with useAddonState
https://github.com/storybookjs/storybook/blob/next/addons/viewport/src/Tool.tsx#L152-L160

   useEffect(() => {
      setState({  
        selected:  //                         <-- called here
          defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id),
        isRotated: state.isRotated,
      });
    }, [defaultViewport]);

    const { selected, isRotated } = state; // <--- not updated here

[Producdevity]

Any updates on this?

[mct-dev]

Same problem here. I tried setting defaultViewport in preview file, story file, and per component but none of them load the page with the viewport applied.

[Producdevity]

There was a ticket for this but it has been closed without a solution?

[murilo-campaner]

+1 here.

[alidcast]

Looks like the issue still persists with storybook 7.

I'm unable to get defaultViewport working in preview config nor for individual components.

[alidcast]

I realized the issue - Storybook does not use the viewport name as the identifier.

is uses the names of the object keys. so { phone: { name: 'my phone', id: 'myPhone' } } will be selected as phone

after setting initial viewport identifier used by storybook, it works

[Jnliana20]

Looks like the issue still persists with storybook 8.
I'm unable to get defaultViewport working in preview config nor for individual components.