Why this ref.measureLayout is giving me error?

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?