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 : 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 :

Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.     at mapIntoArray (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46463:13)     at mapChildren (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46490:3)     at Object.toArray (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46540:10)     at parseReactElement2 (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3910:3822)     at reactElementToJsxString (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3920:3471)     at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3921:12924     at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46491:17     at mapIntoArray (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46382:23)     at Object.mapChildren [as map] (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:46490:3)     at renderJsx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-af496b.iframe.bundle.js:3921:12757)

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 couldn’t find anything on the web