Inconsistent delay time for executing code - reactjs

Question

I'm trying to write some code to play animations with the help of the react package framer-motion:
import React from "react";
import './Line.css';
import { motion, useAnimation } from 'framer-motion';
export const Line = ({speed}) => {
const [goingRight, setGoingRight] = React.useState(false);
const [delay, setDelay] = React.useState(1);
const [oldTime, setOldTime] = React.useState(new Date().getTime());
const controls = useAnimation()
React.useEffect(() => {
controls.start({
x: 280,
transition: { delay: 0, duration: speed, type: 'tween', ease: 'linear' }
})
}, [])
const start = async () => {
setDelay((new Date().getTime()) - oldTime);
setOldTime(new Date().getTime());
await setGoingRight(!goingRight);
if (goingRight) {
await controls.start({
x: 280,
transition: { delay: 0, duration: speed, type: 'tween', ease: 'linear' }
})
} else {
await controls.start({
x: 0,
transition: { delay: 0, duration: speed, type: 'tween', ease: 'linear' }
})
}
}
return (
<>
{delay}
<div className='outer'>
<motion.div className='ball'
animate={controls}
onAnimationComplete={() => start()}
/>
<div className='line'/>
</div>
</>
)
}
This component renders a horizontal line and a circle that sits on that line, the circle starts at the left side of the line and is animated to the right. After that, another animation is made to move the circle back to the left and then the cycle continues.
Each animation takes as long as the speed property (in seconds).
I'm also displaying the delay state variable which does the appropriate math to so determine how many milliseconds the most recent animation took since the last animation.
Here's my problem, let's say I render this component with a speed property of 1. In a perfect world, delay would always = 1000, but of course, there's some time loss for executing the code in the start() function so delay usually = 1017 instead. That would be fine because I could account for the difference, but strangely, delay is sometimes exactly 1000 instead (around 1 in every 4 animations it seems, but it's not consistent).
I need these animation times to be precise and this is too much of a deviation for what I need and I can't seem to figure out how to fix it. I have a suspicion this might be just be the nature of doing all this in real time and that it may be an unsolvable problem, but I figured I'd ask in case anyone has found themselves in a scenario like this before.
Instead of using multiple animation that are run after another, I've tried just using one infinitely repeating animation like this:
controls.start({
x: 280,
transition: { delay: 0, duration: speed, type: 'tween', ease: 'linear' repeat: Infinity, repeatType: 'reverse', }
})
The problem with doing this is that I need code to run after the circle hits the end of the line every time, which before I was using onAnimationComplete to accomplish, but onAnimationComplete seems to only be triggered when the entire animation completes, not also when it repeats