Animations don't work, somehow ¯\_(ツ)_/¯

[BranislavMateas]

So basically I am new here, and I am trying to make this work. BUT, my animations are not working. Correct me, but am I right, that I can use this API with functional programming? I still don't get the flipKey (i set it to {orderChange}, basically because of the fact, that animation will start when this function is called) and flipId (id of Todo). My Array of todos consists of following?
Array(3) [ {…}, {…}, {…} ]
0: Object { id: "1da6a5d8-f73c-4de6-bba9-febff64b8d8b", name: "hello", complete: false, … }
complete: false
date: "16.7.2021"
dateYes: false
descr: ""
id: "1da6a5d8-f73c-4de6-bba9-febff64b8d8b"
name: "hello"
remaining: 0
​
1: Object { id: "002bd3f2-ae4e-4865-8a90-b35e3ad48ac4", name: "there", complete: false, … }
complete: false
date: "16.7.2021"
dateYes: false
descr: ""
id: "002bd3f2-ae4e-4865-8a90-b35e3ad48ac4"
name: "there"
remaining: 0
​
2: Object { id: "898d057e-956b-453d-8535-4e8ff4a5df62", name: "how", complete: false, … }
complete: false
date: "16.7.2021"
dateYes: false
descr: "are you"
id: "898d057e-956b-453d-8535-4e8ff4a5df62"
name: "how"
remaining: 0

let me show you my code now:
<Flipper element="ul" className="list" flipKey={orderChange}>
{todosList.map((todo) => (
<Flipped flipId={todo.id} key={todo.id}>
<Todo key={todo.id} exactTodo={todo} todos={todosList} toggleTodo={toggleTodo} handleCompleteTodos={handleCompleteTodos} orderChange={orderChange} />
</Flipped>
))}
</Flipper>

Note: Todo is basically one big div with many things in it:

<div className="task"> <div className="item"> <div className="leftSide"> <input type="checkbox" className="confirmation" checked={exactTodo.complete} onChange={hadleTodoClick} ></input> </div> <div className="rightSide"> <h3>{exactTodo.name}</h3> {exactTodo.dateYes === true && ( <h5> do {exactTodo.date} |{" "} {exactTodo.remaining < 0 ? "Zameškaných dní: " + Math.abs(exactTodo.remaining) : "Ostávajúcich dní: " + exactTodo.remaining} </h5> )} <h4>{exactTodo.descr}</h4> </div> </div> <div className="sorting"> <FontAwesomeIcon icon={faChevronUp} onClick={handleOrderHigher} /> <FontAwesomeIcon icon={faChevronDown} onClick={handleOrderLower} /> </div> </div>

I would be glad for help. Have a good day!