DocsPage controls do not work for iframe stories

[stephiescastle]

Issue description

On stories whose DocsPage is configured to use iframes instead of inline stories (inlineStories: false), editing the controls or "ArgsTable" properties doesn't update the rendered story.

• This only occurs on Docs that set inlineStories: false
• This only occurs in the Docs view. Canvas view works fine

inlineStories: false was used to fix init issues with components that require additional JavaScript functionality that was not initializing correctly. Specifically, this is required for any Swiper.js carousel and the HeroMedia component (Javascript is used for the mobile caption toggle).

Steps to reproduce the issue

1. Go to the docs view of any story that has inlineStories: false. Ex: https://nasa-jpl.github.io/explorer-1/?path=/docs/components-blocks-blockarticlecarousel--carousel
2. Try editing any value in the docs table. Ex: try editing the "Heading" for BlockArticleCarousel
3. You will see that the embedded story does not update to reflect the change.
4. Try the same thing in Canvas view.
5. You will see that the rendered story does update in canvas view

What's the expected result?

That the rendered story on the DocsPage will update to match changed values in the ArgsTable

What's the actual result?

The rendered story on the DocsPage does not update.

Additional details

Possible approaches, in order of effort:

1. Add a note to the Docs view either introducing or possibly replacing the ArgsTable directing users to view the story in Canvas mode to modify the arguments.
2. Fix inlineStories in Docs view to initialize correctly, perhaps by using the prepareForInline function. Additionally, these problematic components seem to initialize correctly in our MDX docs, so we could try switching to MDX as well.

[stephiescastle]

This is a known issue:
storybookjs/storybook#11908