The code is working how I want. The balls appear and then the seeds appear after disappearing the balls. Yet, if you check the console, there is like 1000 errors, when the disappearance of the ball happens.

I have tried to solve it two ways. Both have failed

  const ballsSetter = () =>{
    setBalls(true)
  }

  const seedsSetter = () =>{
    setBalls(false)
    setSeeds(true)
  }

  const timingOfLevel2 = () => {
    setTimeout(ballsSetter, 5000);
    setTimeout(seedsSetter, 15000);
    setTimeout(() => {console.log("the end")},20000);
  }

useEffect(()=>{
  timingOfLevel2()
},[])
  

const ifAttempt = () =>{
  if(balls){
    return  <>
    <EnemiesBallsReturn 
    enemyBall1Ref = {enemyBall1Ref}
    />
    </>
  } else if (seeds){
    return <>
     <EnemiesSeedsReturn 
    enemySeed1Ref = {enemySeed1Ref}
   /> 
    </>
  } 
}

and returning the ifAttempt function in the return

or

>  {balls?   <EnemiesBallsReturn enemyBall1Ref = {enemyBall1Ref}/>:null}
   {seeds? <EnemiesSeedsReturn enemySeed1Ref = {enemySeed1Ref}/>:null}

either way when the state of balls or seeds is false, it is returning null. and I'm not seeing anything but when it switches to seed it throws this error. basically stating it cant draw an undefined I understand that but it shouldn't be checking for anything bc its unmounted/null? I'm confused any help or direction would be greatly appreciated