How do i animate data from api call?

[msagerup]

Why can i not animate from an array that is created in the component?

Why does this work.
...
const test = [{name: "dd"}, {name: "ddddd"}, {name: "dd"}]

const MainMenuPage = () => {
const transitions = useTransition(test, test => test.name, {
from: { transform: 'translate3d(0,-40px,0)' },
enter: { transform: 'translate3d(0,0px,0)' },
leave: { transform: 'translate3d(0,-40px,0)' },
})
....

But not this ?
const MainMenuPage = () => {
const transitions = useTransition(test, test => test.name, {
from: { transform: 'translate3d(0,-40px,0)' },
enter: { transform: 'translate3d(0,0px,0)' },
leave: { transform: 'translate3d(0,-40px,0)' },
})

const test = [{name: "dd"}, {name: "ddddd"}, {name: "dd"}]
....

I wanted to render an array from a api call in use effect, but .. no. how do i animate and array from api calls, ?