How to have the Storybook `Primary` and `ArgsTable` components refer to a different component in a non MDX page

I am trying to create a story for a component. For example:

Button.stories.tsx:

import React from 'react';
import {
  ArgsTable,
  Description,
  Primary,
  Title,
} from '@storybook/addon-docs';
import { Meta, Story } from '@storybook/react/types-6-0';
import { Button as ButtonComponent, ButtonProps } from './Button';

export default {
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  component: ButtonComponent,
  parameters: {
    docs: {
      page: () => (
        <>
          <Title />
          <Description />
          <Primary />
          <ArgsTable />
        </>
      ),
    },
  },
  title: 'Example/Button',
} as Meta;

export const ButtonParentComponent: Story<ButtonProps> = (args) => (
  <>
    <h1>hello world</h1>
    <ButtonComponent {...args} />
  </>
);

However, I want to be able to have the Primary and ArgsTable addon-blocs not refer to ButtonParentComponent but instead refer to ButtonComponent. However, I still need ButtonParentComponent to be the component that is shown in my canvas.

The documentation currently seems unclear on how I can do this. It looks like I can refer to the story's name when using MDX, as mentioned here, but it is unclear how I can do this for a non MDX file.

To reproduce:

1. Clone this repo
2. Run yarn && yarn storybook

How can I have my Primary and ArgsTable components refer to a different component in a non MDX page? Thanks!