React make one component wait for another

I want one instance of component to be called after other instance of same component completed with its execution inside a different parent component

I have a component TypeWriter that shows type animation with delay between each character being written

const TypeWriter =  ({text,delay})=>{
  
  const [currentTxt, setCurrentText] = useState('');
  const [currentIdx,setCurrentIdx] = useState(0);


  useEffect(()=>{
    let timeOut;
    
    if(text.length>currentIdx){
      timeOut = setTimeout(()=>{
        setCurrentText(currentTxt=>currentTxt+text[currentIdx]);
        setCurrentIdx(currentIdx=>currentIdx+1);
      },delay)
    }


    return ()=>clearTimeout(timeOut);
  },[currentIdx])

  return <>{currentTxt}</>
}

Issue is I want one TypeWriter instance to be called after previous one complete (useEffect end):

const SomeComponent = ()=>return (<h1 className={`${styles.heroHeadText} lg:leading-normal -md:text-xl -md:mt-5`}>
   <TypeWriter text="Hello, it's me " delay={200}/>
   <span className='text-[#915eff]'><TypeWriter text=" name" delay={200}/></span>
</h1>)

TypeWriter inside span must be instantiated after TypeWriter inside h1 is completed

I am new to React, let me know if in anyone I can use mutexLock between instances.
Thanks in advance (:

The simplest solution I can think of is a callback function that can be passed into your TypeWriter component.

This way in your SomeComponent, you can initialise a state to keep track of your first TypeWriter work. Once the first typewriter has finished its job, the callback function updates the state of your first instance of typewriter.

Then you can conditionally render your second instance once the first has finished. Something like this

const TypeWriter =  ({text,delay,onComplete})=>{
  
  const [currentTxt, setCurrentText] = useState('');
  const [currentIdx,setCurrentIdx] = useState(0);


  useEffect(()=>{
    let timeOut;
    
    if(text.length>currentIdx){
      timeOut = setTimeout(()=>{
        setCurrentText(currentTxt=>currentTxt+text[currentIdx]);
        setCurrentIdx(currentIdx=>currentIdx+1);
      },delay)
    }
    
    if(onComplete) {
      onComplete();  
    }

    return ()=>clearTimeout(timeOut);
  },[currentIdx])

  return <>{currentTxt}</>
}

Then conditionally render the second instance like this.

const SomeComponent = () => {
  const [firstTextComplete, setFirstTextComplete] = useState(false);

  return (
       <TypeWriter text="Hello, it's me " delay={200} onComplete={() => setFirstTextComplete(true)}/>
    
       {firstTextComplete && <span className='text-[#915eff]'><TypeWriter text=" name" delay={200}/></span>}
   
  );
};