ViewPager built with react-measure v4 iteration

ViewPager.jsx

import React, { useRef } from 'react'
import { useMeasure } from 'react-measure'

function getViewTargets(node) {
  const targets = []
  if (node) {
    let target = 0
    for (let index = 0; index < node.children.length; index++) {
      const childNode = node.children[index]
      const bounds = childNode.getBoundingClientRect()
      targets.push(target)
      target -= bounds.width
    }
  }
  return targets
}

function ViewPager({ activeViewIndex, children }) {
  const trackRef = useRef()
  const viewTargets = useMeasure(trackRef, getViewTargets)
  return (
    <div style={{ overflow: 'hidden' }}>
      <div
        ref={trackRef}
        style={{
          transform: `translateX(${viewTargets[activeViewIndex]}px)`,
          transition: 'transform ease-out'
        }}
      >
        {children}
      </div>
    </div>
  )
}