Why this ref.measureLayout is giving me error? - reactjs

Question

I am trying to get the measurement of the tabs.
Here is the data for this test app. I am creating ref here
const images = {
man: 'https://www.gogole.com',
....
};
const data = Object.keys(images).map(i => ({
key: i,
title: i,
image: images[i],
ref: React.createRef(),
}));
Now I am trying to get the measurement of each tab like this
const Tab = React.forwardRef(({item}, ref) => {
return (
<View ref={ref} key={item.title}>
<Text>{item.title}</Text>
</View>
);
});
const Tabs = ({data, scrollX}) => {
const containerRef = useRef({});
React.useEffect(() => {
data && data.forEach((item) => {
item.ref.current.measureLayout(
containerRef.current,
(x, y, width, height) => {
console.log(x, y, width, height);
},
);
});
},[]);
return (
<View
style={{
position: 'absolute',
}}>
{data.map((data, index) => (
<Tab key={index} item={data} ref={data.ref} />
))}
</View>
);
};
return (
<View style={styles.container}>
<Tabs data={data} />
</View>
)
As you can see I am trying to console.log the measurement in the Tabs. But the app doesn't return the measurement but always this line
Warning: ref.measureLayout must be called with a node handle or a ref to a native component.
From my research in other GitHub treads , there is something called relativeToNativeNode which is deprecated now. Is my error related to this?
So, to avoid the error and get the measurement. What should I change in the code?