Не могу избавиться от ошибки в консоли, которая никак не влияет на работу приложения: Warning: findDOMNode is deprecated in StrictMode

Всем привет! Использую React Transition Group для анимации. Анимация работает, но появляется ошибка. Что бы ёе устранить пробовал всякие варианты передачи ref, но всё тщетно.

Вот компонент который рендерит список дел:

import React from "react";
import ToDoItem from "./ToDoItem/ToDoItem";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./ToDoList.css";

function ToDoList({ todos, actions }) {
 return todos.length > 0 ? (
   <div className="container_list">
     <TransitionGroup component='ul' className="todo_list_inner">
       {todos.map((todo) => {
         return (
           <CSSTransition  key={todo.id} timeout={700} classNames="li">
             <ToDoItem  todo={todo} id={todo.id} {...actions} />
           </CSSTransition>
         );
       })}
     </TransitionGroup>
   </div>
 ) : (
   <h1 className="emptyList">Пустой список дел...</h1>
 );}

export default ToDoList;

И вот компонент ToDoItem

import React, { useState, useRef, useEffect, memo } from "react";
import Input from "../../UI/Input/Input";
import Button from "../../UI/Button/Button";
import "./ToDoItem.css"

function ToDoItem({ todo, completeTodo, deleteTodo, id, editTodo}) {
  const [editing, editingState] = useState(false);
  const [editInputValue, editInputValueState] = useState("");
  const classes = [];
  const inputRef = useRef(null);

  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  });

  const changeTitle = () => {
    editingState(true);
    editInputValueState(todo.title); 
  };

  const changeComplite =() => {
    completeTodo(id);
  }

  if (todo.completed) {
    classes.push("done");
  }

  const removeTodo = () => {
    deleteTodo(todo.id);
  };

  const changeValue = (event) => {
    editInputValueState(event.target.value);
  };

  const submitUpdate = (e) => {
    e.preventDefault();
    editTodo(id, editInputValue);
    editingState(false);
    editInputValueState("");
  };

  const handleBlur = (e) => {
    editTodo(id, e.target.value);
    editingState(false);
    editInputValueState("");
  };

  const todoItemInputEdit = () => {
    return (
      <form
        className="form_todoItem"
        onSubmit={submitUpdate}
        onBlur={handleBlur}
      >
        <Input value={editInputValue} onChange={changeValue} ref={inputRef} />
      </form>
    );
  };

  return (
    <>
      <li className='liTodo'>
        <span className={classes.join(" ")}>
          <Input
            type="checkbox"
            id={id}
            checked={todo.completed}
            onChange={changeComplite}
          />
          &nbsp;
          {editing ? todoItemInputEdit() : todo.title}
        </span>
        <div className="btn_todoItem">
          <Button
            text={String.fromCharCode(9998)}
            className="btn_edit"
            onClick={changeTitle}
          />
          <Button
            className="btnRemove"
            onClick={removeTodo}
            text={String.fromCharCode(215)}
          />
        </div>
      </li>
    </>
  );
}

export default memo(ToDoItem);