I have this react component:

export const ClientChannelsList = (props) => {
  const [theDate, setTheDate] = useState(null);
  const [theFilter, setTheFilter] = useState({
    collectionQuery: c => c.where('created_stripe', '>=', 1611700523)
  });


  function handleDateChanged(date) {
    setTheDate(date.getTime()/1000);
    setTheFilter({
      collectionQuery: c => c.where('created_stripe', '>=', theDate)
    });

  }
  return (
    <List exporter={exporter} filter={theFilter} {...props} filters={filters} actions={<TheActions/>}>
      <>
        <Datagrid>
          <TextField label="Channel Id" source="ChannelId"/>
          <TextField label="Name" source="Name"/>
          <TextField label="Email" source="EmailAddress"/>
          <TextField label="Subscription Status" source="SubscriptionStatus"/>
          <TextField label="Has Subscription" source="HasSubscription"/>
          <TextField label="Host Channel Id" source="HostChannelId"/>
          <TextField source="HostChannelName"/>
          <DeleteButton label="" redirect={false}/>
        </Datagrid>
        <DatePicker selected={theDate*1000} onChange={(date) => handleDateChanged(date)}/>
      </>
    </List>
  )
};

This component uses the react-admin module

All I am trying to do is to add a custom filter by passing theFilter to the filter prop of the List component. The issue thats happening is that whenever a date is set using DatePicker, the collection query gets passed on as c=>c.where('created_stripe', '>=', theDate), whereas I would want it to take in the value of theDate in this function something like collectionQuery: c=>c.where('created_stripe','>=', 165343454).

So how should I do it?