When I apply the filters on the table I want to change the Icon color of the filter Icon, but the icon color is not changing somehow.

This is my component,

const Table = () => {

    const [tableFilters, setTableFilters = useState({name: []})


    let tableColumns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            filters: [],
            filterDropdownVisible: false,
            filterIcon: (filtered: boolean) => {
                return (
                    <TableFilterIcon filterColumnData={filters.name.data} />
                )
            },
        },
    ]

    const [columns, setColumns] = useState(tableColumns)


    return (
        <>
            <CommonTable
                data={data}
                columns={tableColumns}
            />
        </>
    )
}

export default Table

In TableFilterIcon component I am rendering non-colored and colored icon based on the selected filters, if filters are applied then I am showing color icon. But the TableFilterIcon component is not rendering when I apply the filters that's why Icon color is not changing. Maybe the TableFilterIcon component is in the object of columns that's why ??

Note: if I don't store the columns in state and directly pass the columns to the CommonTable component then it works.

Can anyone help me with this ?? Also, I am using Ant Design Framework for UI components.