onFilter() is not called when using Calendar element

Question

My web app contains a table with three columns. One of this column shows timestamps and I want to filter them by lazy loading. However, the lazyParams are not set when I select a date in the Calendar. (the onFilter/useEffect hook will not be executed)

The other two filter fields are working as expected. (the onFilter/useEffect hook will be executed)

export const ProductsTable = () => {

    const [lazyParams, setLazyParams] = useState({
        first: 0,
        rows: 10,
        page: 1,
        sortField: null,
        sortOrder: null,
        filters: {
            'properties.TYPE': { value: null, matchMode: FilterMatchMode.EQUALS },
            'properties.TIMESTAMP': { value: null, matchMode: FilterMatchMode.DATE_IS },
            'properties.NAME': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
        }
    });

    const onFilter = (event) => {
        event['first'] = 0;
        setLazyParams(event);
    }


    useEffect(() => {
        loadLazyData(); // not called when I select a date
    },[lazyParams]) 

    const dateFilterTemplate = (options) => {
        return <Calendar value={options.value} onChange={(e) => {           
            options.filterCallback(e.value, options.index)
        }} dateFormat="yy-mm-dd" placeholder="yyyy-mm-dd" mask="9999-99-99" />
    }

return (
        <React.Fragment>
            <DataTable value={products}
                selectionMode="checkbox" 
                selection={selectedProducts} 
                onSelectionChange={e => handleCheckbox(e)} 
                dataKey="properties.identifier"
                responsiveLayout="scroll"
                filters={lazyParams.filters} 
                onFilter={onFilter} 
                filterDisplay="row"
                loading={loading2}
                globalFilterFields={['properties.TYPE', 'properties.TIMESTAMP', 'properties.NAME']}
                emptyMessage="No material found."
                paginator 
                paginatorTemplate={template1}  
                lazy 
                first={lazyParams.first} 
                rows={rows1} 
                onPage={onPage}
                onSort={onSort} 
                sortField={lazyParams.sortField} 
                sortOrder={lazyParams.sortOrder} >

                <Column selectionMode="multiple" headerStyle={{width: '3em'}}></Column>
                <Column field="properties.identifier" header="ID"></Column>
                <Column field="properties.TYPE" header="TYPE" sortable  showFilterMenu={false} filter filterField="properties.TYPE" filterElement={statusRowFilterTemplate} ></Column>
                <Column field="properties.TIMESTAMP" header="TIMESTAMP" showFilterMenu={false} dataType="date" body={dateBodyTemplate} sortable  filterField="properties.TIMESTAMP"  filter filterElement={dateFilterTemplate} filterPlaceholder="Search by Timestamp"></Column>
                <Column field="properties.NAME" header="NAME"           showFilterMenu={false} sortable  filterField="properties.NAME" filter filterPlaceholder="Search by NAME"></Column>
                <Column body={actionBodyTemplate} exportable={false} headerStyle={{ width: '2.0em', textAlign: 'center' }} bodyStyle={{textAlign: 'center', overflow: 'visible'}}></Column>
            </DataTable>

        </React.Fragment>
)
}