Repository: storybook
Issue: [Bug]: ArgsTable: Code Blocks in Markdown Descriptions display `[object Object]` on first render
Labels: bug,needs triage

### Describe the bug

Similar to #18090, code blocks in ArgsTable descriptions encounter a race condition with prism and output `[object Object]` on first render. This happens when there are other syntax highlighted blocks on the page, like in the description section below:

![Google Chrome - Example  Header - Logged In ⋅ Storybook - 2022-10-19 at 10 50 36 AM](https://user-images.githubusercontent.com/674092/196767227-171236f8-0330-449a-89e6-075c0482f03d.png)



### To Reproduce

- [Repo](https://github.com/elstgav/storybook-args-table-markdown-bug)
- [Published Storybook](https://6350398759f07de767fa2625-qieylnhrmf.chromatic.com/?path=/docs/example-header--logged-in)

#### Steps to Reproduce:

1. Add markdown code block to a component’s description:

  ```tsx
  /**
  * Header Description. Also includes markdown code:
  *
  * ```tsx
  * <Header
  *   user={user}
  *   onLogin={() => login()}
  * />
  * ```
  */
  export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
  ```

2. Add markdown code block to a component’s props:

  ```tsx
  interface HeaderProps {
    /**
     * User object
    *
    * ```tsx
    * const user = getUserObject();
    * …
    * <Header user={user} />
    * ```
    */
    user?: User;

    …
  }
  ```

3. Args table description will output `[object Object]`


### System

```shell
Environment Info:

  System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 18.4.0 - ~/.nodenv/versions/18.4.0/bin/node
    Yarn: 3.2.4 - /usr/local/bin/yarn
    npm: 8.12.1 - ~/.nodenv/versions/18.4.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Edge: 105.0.1343.42
    Firefox: 93.0
    Safari: 16.0
  npmPackages:
    @storybook/addon-actions: ^6.5.12 => 6.5.12 
    @storybook/addon-docs: ^6.5.12 => 6.5.12 
    @storybook/addon-essentials: ^6.5.12 => 6.5.12 
    @storybook/addon-interactions: ^6.5.12 => 6.5.12 
    @storybook/addon-links: ^6.5.12 => 6.5.12 
    @storybook/builder-webpack5: ^6.5.12 => 6.5.12 
    @storybook/manager-webpack5: ^6.5.12 => 6.5.12 
    @storybook/node-logger: ^6.5.12 => 6.5.12 
    @storybook/preset-create-react-app: ^4.1.2 => 4.1.2 
    @storybook/react: ^6.5.12 => 6.5.12 
    @storybook/testing-library: ^0.0.13 => 0.0.13
```


### Additional context

This was fixed in Storybook’s SyntaxHighlighter (#18158), but ArgsTable doesn’t currently use it for its `<Markdown/>` component:

https://github.com/storybookjs/storybook/blob/e3991cb4dac45c964e29f82da6be5912464c5a4f/lib/components/src/blocks/ArgsTable/ArgRow.tsx#L92-L96

I would propose we use the same syntax as `<Description/>`, which uses the Markdown `overrides` option to include storybook components, including the syntax highlighter for `code` elements:

https://github.com/storybookjs/storybook/blob/e3991cb4dac45c964e29f82da6be5912464c5a4f/lib/components/src/blocks/Description.tsx#L16

Proposed fix:

```diff
// lib/components/src/blocks/ArgsTable/ArgRow.tsx

+ import { components } from '@storybook/components';

…
          {hasDescription && (
            <Description>
-              <Markdown>{description}</Markdown>
+              <Markdown options={{ overrides: components }}>{description}</Markdown>
            </Description>
          )}
```