argTypes prop description gives "class" warning, leading to MDXProvider ArgsTable ArgRow

[fabpico]

Describe the bug
When I define a prop description which is wrapped in a formatting component, this warning is logged in the console.

react-dom.development.jss:88 Warning: Invalid DOM property `class`. Did you mean `className`?
    in div
    in Unknown (created by ArgRow)
    in div (created by Context.Consumer)
    in Styled(div) (created by ArgRow)
    in td (created by ArgRow)
    in tr (created by ArgRow)
    in ArgRow (created by ArgsTable)
    in tbody (created by ArgsTable)
    in table (created by Context.Consumer)
    in Styled(table) (created by ArgsTable)
    in div (created by Context.Consumer)
    in Styled(div) (created by ArgsTable)
    in ArgsTable (created by TabbedArgsTable)
    in TabbedArgsTable (created by StoryTable)
    in StoryTable (created by ArgsTable)
    in ArgsTable (created by DocsPage)
    in DocsPage
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in SourceContainer (created by DocsContainer)
    in DocsContainer

In my code there is no "class" defined as class, I only used "className".

To Reproduce
I can't create a repro, see #18318.

I have a prop description wrapped in a simple formatting component.

export default {
    title: 'Components/MultiselectDropdown',
    component: MultiselectDropdown,
    argTypes: {
        items: {
            description: ReactDOMServer.renderToStaticMarkup(<StoryDescription>
                <p>Array of objects with properties:</p>
                <code>
                    string id<br/>
                    string label<br/>
                    bool active = false<br/>
                    bool disabled = false
                </code>
            </StoryDescription>),
            control: {type: null}
        },
    },
};

I use ReactDOMServer.renderToStaticMarkup to let render the component tree. Otherwise I would receive Uncaught TypeError: t.replace is not a function.

When I not use StoryDescription, the warning does not come. But I want that formatting of StoryDescription.

export default {
    title: 'Components/MultiselectDropdown',
    component: MultiselectDropdown,
    argTypes: {
        items: {
            description: ReactDOMServer.renderToStaticMarkup(<>
                <p>Array of objects with properties:</p>
                <code>
                    string id<br/>
                    string label<br/>
                    bool active = false<br/>
                    bool disabled = false
                </code>
            </>),
            control: {type: null}
        },
    },
};

The StoryDescription component is simple:

import React from 'react';
import './StoryDescription.scss';

const StoryDescription = (props) => {
    return <div className={'story-description'}>{props.children}</div>
};
export default StoryDescription;

How to silence that warning?

System

  System:                                                      
    OS: Windows 10 10.0.19044                                  
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:                                                    
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE           
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD             
    npm: 8.3.2 - C:\Program Files\nodejs\npm.CMD               
  Browsers:                                                    
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)  
  npmPackages:                                                 
    @storybook/addon-actions: ^6.4.22 => 6.4.22                
    @storybook/addon-docs: ^6.4.22 => 6.4.22
    @storybook/addon-essentials: ^6.4.22 => 6.4.22
    @storybook/addon-knobs: ^6.2.9 => 6.2.9
    @storybook/addon-links: ^6.4.22 => 6.4.22
    @storybook/addon-storysource: ^6.4.22 => 6.4.22
    @storybook/builder-webpack5: ^6.4.22 => 6.4.22
    @storybook/manager-webpack5: ^6.4.22 => 6.4.22
    @storybook/node-logger: ^6.4.22 => 6.4.22
    @storybook/preset-create-react-app: ^4.1.0 => 4.1.0
    @storybook/react: ^6.4.22 => 6.4.22

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).