Using ref with React Hooks in Ant design (antd) Table component with customized filters

Try next:

function App() {
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const searchInput = useRef(null);
  ...
    <Input
      ref={ searchInput }
  ...

For the versions:

• react 18.1.0
• antd: 4.20.2

the following needs to be done for TypeScript (for JavaScript just remove the word "type"):

import { Input } from 'antd'
import type { InputRef } from 'antd'

const someInputElementRef = useRef<InputRef>(null)

You can create ref using useRef hook for your functional compoent:

const searchInput = useRef<Input>(null)

and pass it to Input:

<Input
  ref={searchInput}
  placeholder={`Search ${dataIndex}`}
  {...restProps}
/>

and to auto select it when opened:

onFilterDropdownVisibleChange: (visible) => {
  if (visible) {
    setTimeout(
      () => searchInput && searchInput.current && searchInput.current.select()
    )
    // null check above: as its initial value was null
  }
},

For earlier release (before 16.3) of React, callback-ref was the recommended way to create ref which has been used in the example you mentioned (unlike we used above):

<Input
  ref={node => {
     this.searchInput = node;
  }}
  placeholder={`Search ${dataIndex}`}
  {...restProps}
/>

I tried via custom hook but it didn't work:

import React, { useState, useRef } from 'react'
import { Button, Space, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import Highlighter from 'react-highlight-words'

export default function useColumnSearch({ dataIndexExt }) {
    const [searchText, setSearchText] = useState('')
    const [searchedColumn, setSearchedColumn] = useState(0)
    const refSearchInput = useRef()

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

    const handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm()
        setSearchText(selectedKeys[0])
        setSearchedColumn(dataIndex)
    }

    const handleReset = (clearFilters) => {
        clearFilters()
        setSearchText('')
    }

    return getColumnSearchProps(dataIndexExt)
}

my example in continuation of Aleksey Polonka's answer:

codesandbox ant design Table with custom filter