[Bug]: Any JSX element passed as arg is displayed as <null /> in "Show Code" (Storybook v8.0.0-rc.2)

[melon2504]

Describe the bug

I'm trying to pass a MUI icon as arg for a story. But in "Show Code" it is displayed as . Not just the MUI icon, even if a simple HTML tag is passed, it is displayed as null.

Code:

import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import ButtonIcon from "./ButtonIcon";
import AcUnitIcon from "@mui/icons-material/AcUnit";

const meta = {
  title: "Example/ButtonIcon",
  component: ButtonIcon,
  args: { onClick: fn() },
} satisfies Meta<typeof ButtonIcon>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    icon: <AcUnitIcon />,
    label: "AcUnitIcon",
  },
};

export const Test: Story = {
  args: {
    icon: <p>TEST</p>,
    label: "Test Icon",
  },
};

I tried using displayName, but is still gives the same error. I think Storybook 7 had no issues when doing the same.

To Reproduce

I was able to reproduce the issue through storybook sandbox:
https://stackblitz.com/edit/github-whdypl?file=src%2Fstories%2FButton.stories.tsx

https://githubwhdypl-hbk5--6006--c9a8a620.local-credentialless.webcontainer.io/

System

No response

Additional context

No response

[melon2504]

If I add the following in preview file, actual passed arg value is showing properly but the it is then showing as args object instead of code:

docs: { source: { type: 'code' } }