spring to animate the items in a todo-list app so when i add/delete item they get faded with animation but the strange problem is when the i fill title and description inputs ( just fill them not submiting ) and then press one of the items delete button that item will be deleted but another item will be created by the datas in those filled inputs heres the code

const Search = (props) => {
  const [query, setQuery] = useState("");
  const { todos, setTodos } = useContext(todosContext);
  const [currentPage, setCurrentPage] = useState(0);


  const getFilteredItems = (query, todos) => {
    if (!query) {
      return todos;
    } else {
      return todos.filter((todo) => todo.title.includes(query));
    }
  };
  const filteredItems = getFilteredItems(query, todos);
  const handlePageClick = ({ selected: selectedPage }) => {
    console.log("selectedPage", selectedPage);
    setCurrentPage(selectedPage);
    setQuery("");
  };
  const offset = currentPage * PER_PAGE;
  const currentPageData = filteredItems.slice(offset, offset + PER_PAGE);

const deleteHandler = (id) => {
    axios.delete(`http://127.0.0.1:8000/todo/todos/${id}/`);
    setTodos(
      todos.filter((todo) => {
        return todo.id !== id;
      })
    );
  };


  const transitions = useTransition(currentPageData, {
    from: { opacity: 0, transform: "translateY(-100px)" },
    enter: { opacity: 1, transform: "translateY(0px)" },
    leave: { opacity: 0, transform: "translateY(-100px)" },
    keys: currentPageData.id,
  });


 return (
    <StyledDiv>
   
      {transitions((style, currentPageData) =>
        currentPageData ? (
          <animated.div style={style}>
            <Task
              key={currentPageData.id}
              title={currentPageData.title}
              description={currentPageData.description}
              backgroundColor="#ffffff"
              disabled={loading}
              onClick={() => deleteHandler(currentPageData.id)}
              type={"checkbox"}
              placeholder={"completed"}
              onChange={(e) => processChange(e, currentPageData.id)}
              checked={currentPageData.completed}
              id={currentPageData.id}
              htmlFor={currentPageData.id}
              marginTop="-5px"
            />
          </animated.div>
        ) : (
          ""
        )
      )}
    </StyledDiv>
  );
};

export default Search;