react-spring animation, Getting a unwanted line drawn when element moves

Question

You will get what i mean once you visit my project here

https://resume2020master.gtsb.io/

when the earth moves.. it creats "////" looking line while it moves.

Is the issue related to performance?

Following is the code of the element, I have used react useSprings to do the animation.

function RotatingEarth() {

 const rotation = useSpring({
   from: { transform: "translate(0%,0%)" },
    to: async next => {
      while (1) await next({ transform: "translate(-46.8%,20.7%)" })
    },
    config: { duration: 10000 },
    reset: true
  })

  const revolution = useSpring({
    from: { transform: "translate(0%,0%)", zIndex: '16' },
    to: async next => {
      while (1) {
        await next({ transform: "translate(0%,0%)", zIndex: '16' })
        await next({ transform: "translate(120%,70%)", zIndex: '16' })
        await next({ transform: "translate(250%,100%)", zIndex: '16' })
        await next({ transform: "translate(380%,70%)", zIndex: '16' })
        await next({ transform: "translate(500%,0%)", zIndex: '14' })
        await next({ transform: "translate(400%,-110%)", zIndex: '14' })
        await next({ transform: "translate(300%,-140%)", zIndex: '14' })
        await next({ transform: "translate(200%,-100%)", zIndex: '14' })
        await next({ transform: "translate(80%,-70%)", zIndex: '14' })

      }
    },
    config: { duration: 2000 },
  })
  return (

<>
  <animated.div className="rotatingEarth" style={revolution}>
    < animated.div className="earth" style={{ transform: rotation.transform }}  >
      <Earth></Earth> {/*Earth is just and .SVG image which i have imported */}
    </animated.div>
  </animated.div>
    </>
  );
}

export default RotatingEarth;