getColumnSearchProps broken with nested input

Using codes from the example: https://ant.design/components/table/#components-table-demo-custom-filter-panel

getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={node => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: text =>
      this.state.searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[this.state.searchText]}
          autoEscape
          textToHighlight={text.toString()}
        />
      ) : (
        text
      ),
  });

Error thrown when trying to pass nested values

Sample excerpt from ANTD Table component:

 <Table bordered size='small' dataSource={dada} rowKey='_id'>
....
        <Column 
            title='Name' 
            dataIndex={['profile', 'name']}
            {...this.getColumnSearchProps(['profile', 'name'])}
          />
....

// this is referring to the latest breaking change for V4 that changes the `dataIndex` from dot notation to string array path.

The error:

Uncaught TypeError: Cannot read property 'toString' of undefined

Haven't got a clue how to deal with this. Anyone can help?

Reproduce the nested-value case from the Ant Design Table custom filter example using dataIndex={['profile', 'name']} and getColumnSearchProps. Start by tracing the onFilter and render paths around the nested record value. Done means filtering and rendering nested values no longer throw the reported TypeError.