title: TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable
body: <p>I am trying to use the same table of data on one page it has a filter available and on the main page it doesn't require the filter but once I switch from the transfer tab to the Convert table tab that has the state passing filtered values COMMENTED OUT  I see this error in the title
  UNCOMMENT the commented out state will remove the error but is there a better way to pass the filter values to only one table or any ideas why the restructured start and end date is causing this error?
  With only the 2 currency filters &amp; status filter, the error doesn't show again it only appears after adding the <code>const [startDate, endDate] = filterValues?.dateRange</code></p>
  <pre><code>TypeError: (intermediate value)(intermediate value)(intermediate value) is not iterable
  </code></pre>
  <p>The error seems to only happen once I pass the destructured startDate, endDate through in the ConvertHistoryTable</p>
  <pre><code> const [startDate, endDate] = filterValues?.dateRange
  </code></pre>
  <pre><code>//ConvertHistoryTable
  import React from 'react'
  
  import { useNavigate } from 'react-router-dom'
  import { format } from 'date-fns'
  
  import TableCell from '@mui/material/TableCell'
  import TableRow from '@mui/material/TableRow'
  import IconButton from '@mui/material/IconButton'
  import PreviewIcon from '@mui/icons-material/Preview'
  //  components
  import QueryHolder from 'components/ContentWrapper/QueryHolder'
  import StaticTable from 'components/Table/StaticTable'
  import NumericCell from 'components/Table/cell/NumericCell'
  import { TransactionTypeCell } from 'components/Table/cell/TypeCells'
  import CurrencyAmountCell from 'components/Table/cell/CurrencyAmountCell'
  import ChartContainer from 'components/ChartContainer/ChartContainer'
  import ChipsStatus from 'components/Chips/ChipsStatus'
  //  hooks
  import { useGetExchangedRecord } from 'hooks/exchange'
  import { ExchangeOverview } from '../types/Transaction'
  import { FilterValues } from '../TransactionsOverview'
  
  type Props = {
    filterValues?: FilterValues
    maxHeight?: number
    small?: boolean
  }
  
  export default function ConvertHistoryTable({ filterValues, maxHeight, small }: Props) {
    const [startDate, endDate] = filterValues?.dateRange
  
    const queryRes = useGetExchangedRecord(
      filterValues?.status,
      filterValues?.creditCurrencyCode,
      filterValues?.debitCurrencyCode,
      startDate ? format(startDate, 'yyyy-MM-dd') : undefined,
      endDate ? format(endDate, 'yyyy-MM-dd') : undefined
    )
  
    const records: ExchangeOverview[] = queryRes.isSuccess ? queryRes.data.data : []
  
    return (
      &lt;ChartContainer&gt;
        &lt;QueryHolder queryRes={queryRes}&gt;
          &lt;StaticTable
            small={small}
            maxHeight={maxHeight}
            fieldRows={['Number', 'Type', 'Exchange rate', 'Debit', 'Credit', 'Status', 'Details']}
            valueRows={records.map((item: ExchangeOverview) =&gt; (
              &lt;TableItem item={item} key={item.uuid} /&gt;
            ))}
          /&gt;
        &lt;/QueryHolder&gt;
      &lt;/ChartContainer&gt;
    )
  }
  
  const TableItem = ({ item }: any) =&gt; {
    const navigate = useNavigate()
  
    function handleToDetail(uuid: string) {
      return navigate(`/convert/details/${uuid}`)
    }
  
    return (
      &lt;TableRow&gt;
        &lt;TableCell&gt;{item.refNum}&lt;/TableCell&gt;
        &lt;TransactionTypeCell type={item.type} /&gt;
        &lt;NumericCell value={item.exchangeRate} /&gt;
        &lt;CurrencyAmountCell currencyCode={item.creditCurrencyCode} amount={item.creditAmount} /&gt;
        &lt;CurrencyAmountCell currencyCode={item.debitCurrencyCode} amount={item.debitAmount} /&gt;
        &lt;TableCell&gt;
          &lt;ChipsStatus status={item.status} /&gt;
        &lt;/TableCell&gt;
        &lt;TableCell&gt;
          &lt;IconButton onClick={() =&gt; handleToDetail(item.detailsUuid)}&gt;
            &lt;PreviewIcon /&gt;
          &lt;/IconButton&gt;
        &lt;/TableCell&gt;
      &lt;/TableRow&gt;
    )
  }
  
  </code></pre>
  <pre><code>//mainpage
  type TabPanelProps = {
    children?: React.ReactNode
    index: number
    value: number
  }
  export type FilterValues = {
    status: string
    currency: string
    creditCurrencyCode: string
    debitCurrencyCode: string
    dateRange: any
  }
  
  function TabPanel({ children, value, index, ...other }: TabPanelProps) {
    return (
      &lt;div
        role=&quot;tabpanel&quot;
        hidden={value !== index}
        id={`table-tabpanel-${index}`}
        aria-labelledby={`table-tab-${index}`}
        {...other}
      &gt;
        {value === index &amp;&amp; &lt;Box&gt;{children}&lt;/Box&gt;}
      &lt;/div&gt;
    )
  }
  
  function a11yProps(index: number) {
    return {
      id: `table-tab-${index}`,
      'aria-controls': `table-tabpanel-${index}`,
    }
  }
  
  export default function Dashboard() {
    const [tabValue, setTabValue] = React.useState(0)
  
    const handleTabChange = (event: React.SyntheticEvent, newValue: number) =&gt; {
      setTabValue(newValue)
    }
  
    const [transferFilterValues, setTransferFilterValues] = React.useState&lt;FilterValues&gt;({
      status: '',
      currency: '',
      creditCurrencyCode: '',
      debitCurrencyCode: '',
      dateRange: [null, null],
    })
  
    // const [exchangeFilterValues, setExchangeFilterValues] = React.useState&lt;FilterValues&gt;({
    //   status: '',
    //   currency: '',
    //   creditCurrencyCode: '',
    //   debitCurrencyCode: '',
    //   dateRange: [null, null],
    // })
  
    return (
      &lt;Grid container spacing={4}&gt;
        &lt;Grid item xs={12}&gt;
          &lt;AccountBalances /&gt;
        &lt;/Grid&gt;
        &lt;Grid item xs={12}&gt;
          &lt;Grid container spacing={2}&gt;
            &lt;Grid item xs={12} md={9}&gt;
              &lt;Tabs
                value={tabValue}
                onChange={handleTabChange}
                aria-label=&quot;transaction tabs&quot;
                centered
              &gt;
                &lt;Tab label=&quot;Transfer&quot; {...a11yProps(0)} /&gt;
                &lt;Tab label=&quot;Convert&quot; {...a11yProps(1)} /&gt;
              &lt;/Tabs&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={9} sx={{ display: { xs: 'none', md: 'flex' } }} /&gt;
            &lt;Grid item xs={12} md={9}&gt;
              &lt;TabPanel value={tabValue} index={0}&gt;
                &lt;TransferHistoryTable filterValues={transferFilterValues} maxHeight={500} small /&gt;
              &lt;/TabPanel&gt;
              &lt;TabPanel value={tabValue} index={1}&gt;
                &lt;ConvertHistoryTable maxHeight={500} small /&gt;
              &lt;/TabPanel&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} md={3}&gt;
              &lt;FakeBox height=&quot;400px&quot; /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    )
  }
  
  const FakeBox = ({ height }) =&gt; (
    &lt;Card
      sx={{
        minHeight: height,
      }}
    &gt;
      &lt;Typography variant=&quot;h3&quot;&gt;Notification&lt;/Typography&gt;
      coming soon...
    &lt;/Card&gt;
  )
  
  </code></pre>