I have 2 components that displaying some numbers. The numbers are moving from the component 1 to component 2 which are at the same page.

The numbers are based on different arrays and it deletes from the first array and then it add to the second array and display in second component.

Is there any way I can make animation for this numbers to move from its position to the new position in the new component?

I am using JavaScript and React.

<>
    <component1 numbers=[23, 45, 67] />
    <component2 numbers=[56, 89] />
</>

the numbers are loop with a map. props.numbers.map()