react props update functional component re render with redux

I have a parent component where I call useEffect again and again on a dependency. This dependency id is coming from redux store.

useEffect(() => {
    fetchTrendingPlaces();
  }, [id]);

const fetchTrendingPlaces = async(event) => {
        const resp = await API_call(event)
        setData(resp.data)
    }

From parent , I use a antd Tabs component and pass props to Tab.pane like

const [data, setData] = useState([]);

<Tabs>
  <TabPane tab=... key= ...>
    {id && (<Childcomponent prop1 = {data}>)}
  </TabPane>
</Tabs>

The problem seen is that data is still at its old value that is [] while useEffect already executed and has new data state set . This update prop is not getting passed down to the child that is, child does not re render but I want it to dynamically listen to the changes in the props being passed to it that is prop1.

The logs look like first the child component is executing and afterwards the console.log from the useEffect is printed. I see this as the potential problem.