Using <Story id="...."> not providing a code preview? Is this possible or a limitation of Storybook.

[TonyHoanTrinh]

Hello,

I have a select a component called Dropdown.js which I import into my Button.stories.mdx file.
You should be able to select from the Dropdown menu items and it will render a story.
It does render the stories properly however it doesn't allow for you to be able to see the code preview.

I'm not sure if this is a limitation of Storybook or if I'm implementing this incorrectly.

Any and all help is appreciated!

Dropdown.js

import React, { useState, useRef, useEffect } from 'react';
import { boolean, text, object, select } from '@storybook/addon-knobs';
import { withReadme } from 'storybook-readme';
import { Meta, Story, Canvas, Source } from '@storybook/addon-docs/blocks';


import {
  Button,
  Tooltip,
} from 'components';

import {
  ButtonText,
  ButtonIcon,
} from 'components/Button';

import { StoryContainer } from '../../StorybookHelpers';
import ReadMe from './README.md';

export const STORY_CONTAINER_STYLE = {
  style: {
    margin: Tokens.SPACING.SPACING_12
  }
};

export const Dropdown = () => {
  const [selection, setSelection] = useState("first");

  const leaveChange = () => {
    const inputvalue = document.getElementById("buttonstories").value;
      switch (inputvalue) {
        case "withtextonly":
          setSelection("first");
          break;
        default:
          break;
    }
  }

  const selectionrender = () => {
    if (selection === 'first') {
      return <Canvas> <Story id="ccfk-🧩-%E2%A0%80components-button--with-text-only" /> </Canvas>
      }
  }

  return(
    <div>
      <select name="buttonstories" id="buttonstories" onChange={leaveChange}>
        <option value="withtextonly">WithTextOnly</option>
      </select>

        <StoryContainer {...STORY_CONTAINER_STYLE}>
          { selectionrender() }
        </StoryContainer>
    </div>
  )
}

Button.stories.mdx

import { Meta, Story, Canvas, Source } from '@storybook/addon-docs/blocks';
import { Button } from 'components';
import { Dropdown, STORY_CONTAINER_STYLE } from './Dropdown.js';
import { boolean, text, object, select } from '@storybook/addon-knobs';


<Meta title="MDX/Button" component={Button} />

# Button

<Story name='buttontest'>
  <StoryContainer {...STORY_CONTAINER_STYLE}>
    <Button
      theme={object('theme', {})}
      aria-label="create"
      disabled={boolean('disabled', false)}
      fullWidth={boolean('full width', false)}
      onClick={(event) => { event.persist(); console.log('CLICKED', { event }); }}
    >
    CREATE
    </Button>
  </StoryContainer>
</Story>


<Story name='dropdown'>
  <Dropdown />
</Story>

Screenshot: Notice the Code Preview being unavailable. It should be available though and I'm confused on why it is not.