How to use the react-view.PropTypes.Array function in react-view

'sliderHandleFillSelected',
    'sliderHandleFillSelectedHover',
    'sliderHandleFillSelectedActive',
    'sliderHandleFillDisabled',
    'sliderHandleInnerFill',
    'sliderHandleInnerFillDisabled',
    'sliderHandleInnerFillSelectedHover',
    'sliderHandleInnerFillSelectedActive',
    'sliderBorder',
    'sliderBorderHover',
    'sliderBorderDisabled',
  ],
  props: {
    value: {
      value: '[10]',
      type: PropTypes.Array,
      description: 'Slider value.',
      stateful: true,
    },
    onChange: {
      value: '({value}) => value && setValue(value)',
      type: PropTypes.Function,
      description: 'Called when slider value is changed.',
      propHook: {
        what: 'JSON.stringify(value)',
        into: 'value',
      },
    },
    onFinalChange: {
      value: '({value}) => console.log(value)',
      type: PropTypes.Function,
      description: 'Called when slider value is done changing.',

named: ['StatefulMenu'],
    },
  },
  scope: {StatefulMenu},
  theme: [
    'menuFill',
    'menuFillHover',
    'menuFontDefault',
    'menuFontDisabled',
    'menuFontHighlighted',
    'menuFontSelected',
  ],
  props: {
    items: {
      value: items,
      type: PropTypes.Array,
      description: 'Array of items in the menu.',
    },
    onItemSelect: {
      value: undefined,
      type: PropTypes.Function,
      description: 'Callback executed on menu item clicks.',
      placeholder: '({item}) => console.log(item)',
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Option', 'List', 'EmptyState'],
        sharedProps: {},
      },

const TableSemanticConfig: TConfig = {
  imports: {
    'baseui/table-semantic': {
      named: ['Unstable_Table'],
    },
  },
  scope: {Unstable_Table},
  theme: [
    'tableHeadBackgroundColor',
    'tableBackground',
    'tableStripedBackground',
  ],
  props: {
    columns: {
      value: `['Name', 'Age', 'Address']`,
      type: PropTypes.Array,
      description: 'Table columns. Data passed to each header cell.',
    },
    data: {
      value: `[
  ['Sarah Brown', 31, '100 Broadway St., New York City, New York'],
  ['Jane Smith', 32, '100 Market St., San Francisco, California'],
]`,
      type: PropTypes.Array,
      description: 'Table rows. Data passed to each row and cell',
    },
    horizontalScrollWidth: {
      value: undefined,
      type: PropTypes.String,
      description: 'Table width fills this provided value.',
    },
    overrides: {

what: `Array.isArray(date) && date.length === 2 ?
    "[new Date('" + date[0].toISOString() + "'), new Date('" + date[1].toISOString() + "')]"
  : (Array.isArray(date) ? "[new Date('" + date[0].toISOString() + "')]" : "[new Date('" + date.toISOString() + "')]")`,
        into: 'value',
      },
    },
    autoFocusCalendar: {
      value: undefined,
      type: PropTypes.Function,
      description:
        'Defines if the calendar is set to be focused on an initial render.',
      hidden: true,
    },
    excludeDates: {
      value: undefined,
      type: PropTypes.Array,
      description: 'A list of dates to disable. Array',
      hidden: true,
    },
    quickSelect: {
      value: undefined,
      type: PropTypes.Boolean,
      description:
        'Display select for quickly choosing date ranges. range must be true as well.',
    },
    formatString: {
      value: undefined,
      type: PropTypes.String,
      description: 'String format passed to date-fns.',
      placeholder: 'yyyy/MM/dd',
      hidden: true,
    },

imports: {
        'baseui/select': {
          named: ['SIZE'],
        },
      },
    },
    options: {
      value: `[
  {label: 'AliceBlue', id: '#F0F8FF'},
  {label: 'AntiqueWhite', id: '#FAEBD7'},
  {label: 'Aqua', id: '#00FFFF'},
  {label: 'Aquamarine', id: '#7FFFD4'},
  {label: 'Azure', id: '#F0FFFF'},
  {label: 'Beige', id: '#F5F5DC'},
]`,
      type: PropTypes.Array,
      description: `Options to be displayed in the dropdown.
        If an option has a disabled prop value set to true it will be rendered as a disabled option in the dropdown.`,
    },
    value: {
      value: '[]',
      type: PropTypes.Array,
      description: `A current selected value(s). If a selected value has a clearableValue
        prop set to true it will be rendered as a disabled selected option that can't be cleared.`,
      stateful: true,
    },
    getOptionLabel: {
      value: undefined,
      type: PropTypes.Function,
      description:
        'A custom method to get a display value for a dropdown option.',
      placeholder: '({option}) => option.label',

'tableFilterHeading',
    'tableFilterBackground',
    'tableFilterFooterBackground',
  ],
  props: {
    columns: {
      value: `['Name', 'Age', 'Address']`,
      type: PropTypes.Array,
      description: 'Table columns. Data passed to each header cell.',
    },
    data: {
      value: `[
  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
]`,
      type: PropTypes.Array,
      description: 'Table rows. Data passed to each row and cell',
    },
    horizontalScrollWidth: {
      value: undefined,
      type: PropTypes.String,
      description: 'Table width fills this provided value.',
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: [],
        sharedProps: {},
      },
    },

},
  },
  scope: {Table},
  theme: [
    'tableHeadBackgroundColor',
    'tableBackground',
    'tableStripedBackground',
    'tableFilter',
    'tableFilterHeading',
    'tableFilterBackground',
    'tableFilterFooterBackground',
  ],
  props: {
    columns: {
      value: `['Name', 'Age', 'Address']`,
      type: PropTypes.Array,
      description: 'Table columns. Data passed to each header cell.',
    },
    data: {
      value: `[
  ['Sarah Brown', 31, '100 Broadway st. New York City, New York'],
  ['Jane Smith', 32, '100 Market st. San Francisco, California'],
]`,
      type: PropTypes.Array,
      description: 'Table rows. Data passed to each row and cell',
    },
    horizontalScrollWidth: {
      value: undefined,
      type: PropTypes.String,
      description: 'Table width fills this provided value.',
    },
    overrides: {

$isRemovable: {
            type: PropTypes.Boolean,
            description: 'Indicates if the item can be removed from the list.',
          },
          $isRemovableByMove: {
            type: PropTypes.Boolean,
            description:
              'Indicates if the item can be removed from the list by dnd outside of the list.',
          },
          $isOutOfBounds: {
            type: PropTypes.Boolean,
            description:
              'Indicates if the item is being out of the list boundaries.',
          },
          $value: {
            type: PropTypes.Array,
            description: 'The array of items passed into the list.',
          },
        },
      },
    },
  },
  mapTokensToProps: {
    List: listProps,
  },
};

export default dndListConfig;

],
  },
]`;

const SideNavigationConfig: TConfig = {
  imports: {
    'baseui/side-navigation': {
      named: ['Navigation'],
    },
  },
  scope: {Navigation},
  theme: [],
  props: {
    items: {
      value: items,
      type: PropTypes.Array,
      description: 'Navigation items to render.',
    },
    activeItemId: {
      value: '#primary',
      type: PropTypes.String,
      description: 'Currently selected item id.',
      stateful: true,
    },
    onChange: {
      value: '({item}) => setActiveItemId(item.itemId)',
      type: PropTypes.Function,
      description: 'Called when item is clicked.',
      propHook: {
        what: 'item.itemId',
        into: 'activeItemId',
      },

named: ['Button'],
        },
      },
    },
    onClick: {
      value: '(event, index) => {\n  setSelected([index]);\n}',
      type: PropTypes.Function,
      description: `Function called when any button is clicked.`,
      propHook: {
        what: '`[${index}]`',
        into: 'selected',
      },
    },
    selected: {
      value: '[0]',
      type: PropTypes.Array,
      description: 'Defines which buttons are selected',
      stateful: true,
    },
    disabled: {
      value: false,
      type: PropTypes.Boolean,
      description: 'Indicates that the button group is disabled',
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Root'],
        sharedProps: {},
      },