(React) Return( ) show first than useLayoutEffect

 const [test, setTest] = useState('asd')

  useLayoutEffect(() => {
    console.log('useLayoutEffect')
    setTest('111')
  }, [])


  return (
    <>
      {console.log('return=======>')}
      <Button title={test}/>
    </>
  )

What I expected to do

console.log('return=======>') show after console.log('useLayoutEffect')

Currently to do

console.log('useLayoutEffect') show after console.log('return=======>')

I thought useLayoutEffect runs before rendering component but return =====> shows and useLayoutEffect is running...