Cannot read properties reading trim when IndexFilters is added

Question

I'm trying to create a Polaris IndexTable with IndexFilters. I have this code below:

    import { useCallback, useEffect, useState } from 'react'
    import {
      Card,
      ChoiceList,
      IndexFilters,
      IndexTable,
      Page,
      Text,
      TextField,
    } from '@shopify/polaris'
    
    function FormsIndexTable() {
      const formsList = [
        {
          id: 1,
          type: 'type1',
          name: 'Form 1',
          products: 2,
        },
        {
          id: 2,
          type: 'type2',
          name: 'Form 2',
          products: 7,
        },
        {
          id: 3,
          type: 'type2',
          name: 'Form 3',
          registrations: 30,
          products: 4,
        },
      ]
    
      const [sortSelected, setSortSelected] = useState(['order asc'])
      const sortOptions = [
        { label: 'Name', value: 'order asc', directionLabel: 'A to Z' },
        { label: 'Name', value: 'order desc', directionLabel: 'Z to A' },
      ]
    
      const [type, setType] = useState('')
      const handleTypeChange = useCallback((value) => setType(value), [])
    
      const filters = [
        {
          key: 'type',
          label: 'Type',
          filter: (
            <ChoiceList
              title="Type"
              titleHidden
              choices={[
                { label: 'Type 1', value: 'type1' },
                { label: 'Type 2', value: 'type2' },
              ]}
              selected={type}
              onChange={handleTypeChange}
            />
          ),
          shortcut: true,
        },
      ]
    
      const [isLoading, setIsLoading] = useState(false)
    
      const rowMarkup = formsList.map(
        ({ id, type, name, products }, index) => (
          <IndexTable.Row id={id} key={id} position={index}>
            <IndexTable.Cell>{name}</IndexTable.Cell>
            <IndexTable.Cell>{type}</IndexTable.Cell>
            <IndexTable.Cell>{products}</IndexTable.Cell>
          </IndexTable.Row>
        )
      )
    
      return (
        <Card>
          <IndexFilters
            sortOptions={sortOptions}
            sortSelected={sortSelected}
            onSort={setSortSelected}
            filters={filters}
          />
          <IndexTable
            emptyState
            selectable={false}
            pagination
            hasMoreItems
            itemCount={formsList.length}
            headings={[
              { title: 'Name' },
              { title: 'Type' },
              { title: 'Products' }
            ]}
          >
            {rowMarkup}
          </IndexTable>
        </Card>
      )
    }
    
    export default FormsIndexTable

My goal is to allow filtering of the IndexTable. When I add the IndexFilter, I get this error:

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'trim')
Call Stack
eval node_modules/@shopify/polaris/build/esm/components/Tabs/components/CreateViewModal/CreateViewModal.js (24:0)
Array.some
<anonymous>
CreateViewModal
node_modules/@shopify/polaris/build/esm/components/Tabs/components/CreateViewModal/CreateViewModal.js (24:0)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (16305:0)
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js (20074:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21587:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

Looking at the docs for IndexFilter, https://polaris.shopify.com/components/selection-and-input/index-filters#props, sortSelected and onSort are the only ones required when sortOptions is added. I have filters attributes as well. What else am I missing here?