[Bug]: Cant make a new story instance out of an existing one if the story contains an object prop

[FAUSTMANNSTEF]

Summary

I have been messing around storybook and found out about this new cool feature of being able to add new stories when messing around with your current one : https://storybook.js.org/blog/interactive-story-generation/

I tried to do this to with this story

export const ShareButton: Story = {
  args: {
    width: "34px",
    height: "34px",
    padding: "5px",
    borderRadius: "circle",
    background: colors.primary.white,
    color: colors.primary.blue,
    boxShadow: colors.shadows.section,
    marginRight: "0px",
    onClick: fn(),
    children: <Icon component={Share} />,
  },
} 

However when i changed the color for example in the Storybook UI and pressed the button to create a new story based on this change , i get this error

I found out that the mistake lies on the children prop since its structure is the one mentioned in the error:

children : {
type : {...} 2 keys
key : null
ref : null
props : {...} 1 key
_owner : null
_store : {...} 0 keys
}

Is there a way to make this work with an object ? Can i use any sort of json conversion and pass it on from the component itself ? Any input on this is highly appreciated couldnt find anything on the web

Thank you for your help guys !

Additional information

This is the file of the component

/** @jsxImportSource @emotion/react */

import React from "react";
import IconButton from "@mui/material/IconButton";

/**
 * IconButton component props
 */
interface IconButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  gap?: string;
  label?: string;
  color?: string;
  padding?: string;
  fontSize?: string;
  fontFamily?: string;
  height?: string;
  size?: "small" | "medium" | "large" | string;
  marginRight?: string;
  marginLeft?: string;
  ariaLabel?: string;
  textAlign?: "center" | "left" | "right";
  children?: React.ReactNode;
  width?: string;
  borderRadius: "rounded" | "sharp" | "circle" | string;
  boxShadow?: string;
  datacy?: string;
  border?: string;
  background?: string;
}

/**
 * IconButton component props
 */
export default function myIconButton(props: Readonly<IconButtonProps>) {
  const {
    gap,
    size,
    label,
    color,
    padding,
    onClick,
    fontSize,
    fontFamily,
    width,
    height,
    borderRadius,
    boxShadow,
    marginRight,
    textAlign,
    children,
    background,
    ...otherProps // HTML5 button attributes
  } = props;

  /**
   * Predefined radius sizes as options for the border radius
   */
  const radiusSize: { [key: string]: string } = {
    rounded: "30px",
    sharp: "5px",
    circle: "50%",
  };

  /**
   * Return the IconButton component
   */
  return (
    <IconButton
      {...otherProps}
      onClick={onClick}
      aria-label={props.ariaLabel}
      style={{ textAlign: textAlign }}
      data-cy={props.datacy}
      children={props.children}
      sx={{
        display: "flex",
        outline: "none",
        gap: gap ?? "0px",
        whiteSpace: "nowrap",
        alignItems: "center",
        justifyContent: "center",
        width: width,
        height: height,
        fontSize: fontSize ?? "14px",
        padding: padding ?? "7px 24px",
        borderRadius: radiusSize[borderRadius],
        color: color ?? "black",
        fontFamily: fontFamily ?? '"Inter", sans-serif',
        background: background ?? "transparent",
        boxShadow: boxShadow,
        ":hover": {
          cursor: "pointer",
        },
      }}
    ></IconButton>
  );
}

and these are the stories

import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import IconButton from "./myIconButton";
import Share from "@mui/icons-material/Share";
import { Icon } from "@mui/material";
import CloudDownload from "@mui/icons-material/CloudDownload";
import LanguageRounded from "@mui/icons-material/LanguageRounded";
import MenuRounded from "@mui/icons-material/MenuRounded";
import IconSearch from "@mui/icons-material/Search";
import colors from "../../../theme/colors";

/**
 * Storybook metadata for a button with just an icon
 */
const meta = {
  title: "Example/Button/Single Icon Button",
  component: IconButton,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    background: { control: "color" },
    color: { control: "color" },
  },
  args: { onClick: fn() },
} satisfies Meta<typeof IconButton>;

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

/**
 * OpenAid Share Icon Button
 */
export const OpenAidShareButton: Story = {
  args: {
    width: "34px",
    height: "34px",
    padding: "5px",
    borderRadius: "circle",
    background: colors.primary.white,
    color: colors.primary.blue,
    boxShadow: colors.shadows.section,
    marginRight: "0px",
    onClick: fn(),
    children: <Icon component={Share} />,
  },
};

Create a reproduction

No response