Solution is to adjust the transform value used in the to prop of the Spring component. Instead of using a fixed value for the translateY transform, you can use a dynamic value that is based on the number being animated. For example, you can use the numberHeight and numberWidth variables to calculate the vertical and horizontal offsets for each number, and then use these values to position the numbers correctly.
Note that in this example, the translateX transform is being used to horizontally center the numbers within their container. This should help to prevent the numbers from overlapping at the end of the animation.
Solution is to adjust the transform value used in the to prop of the Spring component. Instead of using a fixed value for the translateY transform, you can use a dynamic value that is based on the number being animated. For example, you can use the numberHeight and numberWidth variables to calculate the vertical and horizontal offsets for each number, and then use these values to position the numbers correctly.
Note that in this example, the translateX transform is being used to horizontally center the numbers within their container. This should help to prevent the numbers from overlapping at the end of the animation.