How to use the @storybook/addon-knobs.object function in @storybook/addon-knobs

console.log(colorPickerRef.current)
      /* eslint-enable */
    }

    return (
      <div>
        <div width="" style="{{width:">
           {
              alert(`Swatch selected: ${color}`)
            }}
            maintainInputFocus={boolean('maintainInputFocus', false)}
            colors={object('colors', customColors)}
          /&gt;
        </div>
        <div>
          <button>Log Ref</button>
        </div>
      </div>
    )
  },
  {

.add('wrong network - custom message', () => {
    const props = object('props', {
      currentNetwork: 3,
      requiredNetwork: 5,
      onWeb3Fallback: false,
    });

    return (
      
        {{
          notWeb3CapableBrowserMessage: (
            <div>
              
            </div>

[searchResponse]="searchResponse"
                        [traces]="traces"
                        [activeFacets]="activeFacets"
                        [searchText]="searchText"
                        (searchClicked)="searchClicked($event)"
                        (activeFacetsChange)="activeFacetsChange($event)"
                        (traceItemClicked)="traceItemClicked($event)"
                        (pageChanged)="pageChanged($event)"
                    >
                    
                
            
        `,
    props: {
      searchResponse: object('searchResponse', sampleSearchResponse),
      traces: object('traces', sampleTraces),
      activeFacets: object('activeFacets', {}),
      searchText: text('searchText', ''),
      searchClicked: action('searchClicked'),
      activeFacetsChange: action('activeFacetsChange'),
      traceItemClicked: action('traceItemClicked'),
      pageChanged: action('pageChanged')
    },
  }));

.add('ObjectHome without menu', () => (
    
  ));

)
              }
              avatarImgProps={object('Src/Alt', {
                src: 'https://placehold.it/80x80/caf4fe/caf4fe',
                alt: '',
              })}
              commentDate={text('Comment date', '2 min')}
              text={text(
                'Text',
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris',
              )}
              ownerName={text('Owner name', 'Lorem ipsum')}
              bottomNotes={
                boolean('With bottom notes?', false) && (
                  <div>
                    <span>Bottom note #1</span>
                    <span>Bottom note #2</span>
                    <span>Bottom note #3</span>
                  </div>

const component = () => (
    
);

() => {
      const dataTest = text("dataTest", "test");
      const flex = boolean("flex", false);
      const inline = boolean("Inline", false);
      const direction = select("Direction", [null, ...Object.values(DIRECTIONS)], DIRECTIONS.ROW);
      const wrap = boolean("Wrap", false);
      const grow = boolean("Grow", true);
      const shrink = boolean("Shrink", false);
      const basis = text("Basis", undefined);
      const align = select("Align", [null, ...Object.values(ALIGNS)]);
      const justify = select("Justify", [null, ...Object.values(JUSTIFY)]);
      const spacing = select("Spacing", [null, ...Object.values(SPACINGS)], SPACINGS.EXTRATIGHT);
      const spaceAfter = select("spaceAfter", [null, ...Object.values(SPACINGS_AFTER)]);
      const mediumMobile = object("mediumMobile", {
        direction: DIRECTIONS.COLUMN,
      });
      const largeMobile = object("largeMobile", {
        align: JUSTIFY.END,
      });
      const tablet = object("tablet", {
        spacing: SPACINGS.CONDENSED,
      });
      const desktop = object("desktop", {
        justify: JUSTIFY.BETWEEN,
        direction: DIRECTIONS.ROW,
        align: ALIGNS.START,
      });
      const largeDesktop = object("largeDesktop", {
        spacing: SPACINGS.LOOSE,
      });