Filtragem não funciona

Boa tarde, o meu código não funciona após as implementações de filtragem, mesmo eu criando novos eventos mais recentes e tentando filtra-los.

Meu código:

useListaDeEventos.ts

import { useRecoilValue } from "recoil";
import { listaDeEventosState } from "../atom";

const useListaDeEventos = () => {
    return useRecoilValue(listaDeEventosState)
}

export default useListaDeEventos;

ListaDeEventos

import React from "react";
import Evento from "../Evento";
import Filtro from "../Filtro";
import style from "./ListaDeEventos.module.scss";
import useListaDeEventos from "../state/hooks/useListaDeEventos";
import { useRecoilValue } from "recoil";
import { IFiltroDeEventos } from "../../interfaces/iFiltroDeEventos";
import { filtroDeEventos } from "../state/atom";

const ListaDeEventos: React.FC = () => {
  const todosOsEventos = useListaDeEventos();
  const filtro = useRecoilValue<IFiltroDeEventos>(filtroDeEventos)

  const eventos = todosOsEventos.filter(evento => {
    if (!filtro.data){
      return true
    }
    const ehOMesmoDia = filtro.data.toISOString().slice(0, 10) === evento.inicio.toISOString().slice(0, 10)
    return ehOMesmoDia
  })

  return (
    <section>
      <Filtro />
      <div className={style.Scroll}>
        {eventos.map((evento) => (
          <Evento evento={evento} key={evento.id} />
        ))}
      </div>
    </section>);
};

export default ListaDeEventos;

Filtro

import React, { useState } from 'react';
import style from './Filtro.module.scss';
import { useSetRecoilState } from 'recoil';
import { filtroDeEventos } from '../state/atom';
import { IFiltroDeEventos } from '../../interfaces/iFiltroDeEventos';

const Filtro: React.FC = () => {
  
  const [data, setData] = useState('')
  const setFiltroDeEvento = useSetRecoilState<IFiltroDeEventos>(filtroDeEventos)
  
  const submeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
    evento.preventDefault()
    
    const filtro: IFiltroDeEventos = {}
    if(data) {
      filtro.data = new Date()
    } else {
      filtro.data = null
    }
    setFiltroDeEvento(filtro);
  }

  return (<form className={style.Filtro} onSubmit={submeterForm}>
    <h3 className={style.titulo}>Filtrar por data</h3>
    <input 
      type="date" 
      name="data"
      className={style.input}
      onChange={evento => setData(evento.target.value)} 
      placeholder="Por data"
      value={data} />

    <button className={style.botao}>
      Filtrar
    </button>

  </form>)
}

export default Filtro