In multiple components, I have an identical part of code. It provides 'ant-design' tables with properties necessary for filtering.

```js
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)}
          style={{ width: 188, marginBottom: 8, display: "block" }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button
          onClick={() => this.handleReset(clearFilters)}
          size="small"
          style={{ width: 90 }}
        >
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" 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 => (
      <Highlighter
        highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
        searchWords={[this.state.searchText]}
        autoEscape
        textToHighlight={text && text.toString()}
      />
    )
  });

```

It's used in columns array like this:

```js
columns = [
  {
      title: "Client",
      dataIndex: "client",
      sorter: (a, b) => {
        if (a.client && b.client) {
          return a.client.localeCompare(b.client);
        } else {
          return a.client;
        }
      },
      sortDirections: ["descend", "ascend"],
      ...this.getColumnSearchProps("client")
    }
]

```

I have a problem with figuring out the way to extract this code to a different file. It's a complex construction - an object with multiple properties and react components assigned to them. 
`filterDropdown` can be easily replaced by functional component but is it possible to replace the whole block with a single line?

I've tried to create a new js function `getColumnSearchProps` in a separate file. I replaced `ref={node => { this.searchInput = node; }}` with `const searchInput = React.createRef();` but that led to `searchInput.select is not a function` error.