我希望当我在父组件中的输入中写入内容时，组件更新。并且我期望在useEffects中执行的顺序2组件是this =〉1.end child 2.child 3.end parent 4.parent，但结果是=〉1.end child 2.end parent 3.child 4.parent。为什么是结果？

function App() {
  
  return (
    <div className="App">
      <Container/>
        <Parent/>
      
    </div>
  );
}
function Parent(){
  const [first,setfirst] =useState('');
  const [second,setsecond] =useState('');
  function final(e){
    setsecond(e.target.value);
  }
  function func(e){
    setfirst(e.target.value);
  }

  useEffect(()=>{
    console.log('parent'); //4

    return ()=>{console.log('end parent')} //3
  },[first,second])

  return (
    <>
    <h1>I am parent</h1>
    <input style={{border:"1px solid black"}} value={first} onChange={(e)=>{func(e)}}/>
    <input style={{border:"1px solid black"}} value={second} onChange={(e)=>{final(e)}}/>
    {
      first.length < 7 ? <Testeffect fistargument={first} secondargument={second}/> : <h1>lorem ipsum dolor</h1>
    }
    </>
  )
}

function Testeffect({fistargument,secondargument}){
  
  const [extra,setextra] = useState(0);
  const [force,setforce] =useState(0);
    
  useEffect(()=>{
    
    console.log('child'); //2
     
      return ()=>{console.log('end child')} //1
      
  },[extra,force,fistargument,secondargument])

  return (
    <>
    <h1 onClick={()=>{setextra(extra+1)}}>{fistargument}</h1>
    <h1 onClick={()=>{setforce(force+1)}}>{secondargument}</h1>
    </>
  )
}

export default App;

>