axiosで手に入れたデータを定義後に使用したい

Question

前提・実現したいこと

現在、reactとsqlでウェブアプリケーションを作成しています。sqlから手に入れたデータを子コンポーネントのpropsなどに使用したいのでstateに保存したのですが、propsに定義前のデータが入ってしまいます。asyncとawaitの非同期通信の記事を色々読んでみたのですが、propsに定義後の値だけ入れる方法がわかりません。
現在のコードでは定義前のデータと定義後のデータ両方がコンソールに出力されます。
定義後のデータだけを使用する方法はありますか？

それとも最初にデータを保存するのではなく、データを使う時に非同期通信を行う方が良いのでしょうか？回答お願いします。

該当のソースコード

const EmployerHome = () =>{
    const [data,setData] = useState({hits:[]})

    useEffect(() => {
        const fetchData = async () => {
            const result = await Axios.post('http://localhost:3001/api/getEmployeeInfo')
            setData(result.data)
        };
        fetchData();
    },[])

    console.log(data) 

return (
   <childNode data={data}>  //propsを渡しています
)

const childNode = (props) => {
  console.log(props.data)
  return (
    <div><div/>

  )
}

コンソール

{hits: Array(0)}   //ParentNodeのconsole.log(data)　定義前のデータ
undefined          //childNodeのconsole.log(data)　　　定義前のデータ

{id:1,name:aaa}    //ParentNodeのconsole.log(data) 定義後のデータ
{id:1,name:aaa}    //childNodeのconsole.log(data)　  定義後のデータ