Animation react spring (With hooks vs Render Props)

Question

I was just trying to move between react spring render props to hooks based approach.

For most of the cases the solution was pretty simple as the values I had to use were directly animatable I'd say.

In one particular case I had to animate a map motion and zoom and I can get the initial and final values. The difference between the renderprops and hooks based approch as I noticed was that the props that were given by Spring gave me actual values which I could pass to my Map component while in hooks based approach the props are AnimatedValue. Now my component takes the actual value so I am not able to proceed further with hooks based approach.

So I have a world map component which takes the props center and zoom. Center is co-ordinates in the format [number,number] and zoom is a number.

<WorldMap
  data={data}
  height={height}
  width={width}
  center={[x, y]}
  zoom={z}
  onMarkerClick={handleMarkerClick}
/>

Now when I anumate it with render props approach it works as expected.

<Spring to={springTo} from={springFrom}>
    {({ z, x, y }) => {
      console.log(x, y, z);
      return (
        <WorldMap
          data={data}
          height={height}
          width={width}
          center={[x, y]}
          zoom={z}
          onMarkerClick={handleMarkerClick}
        />
      );
    }}
  </Spring>

Since I beleive in render props the x,y and z are numbers(actual values)

For hooks based the code I use is:

const AWM = animated(WorldMap);
const { x, y, z } = useSpring({ ...springTo, from: { ...springFrom } });

And the rendering part is like:

<AWM
    data={data}
    height={height}
    width={width}
    center={[x, y]}
    zoom={z}
    onMarkerClick={handleMarkerClick}
  />

I am attaching both the sandboxes(RenderProps based and hooks based)

Any help to understand this will be appreciated.

Hooks: https://codesandbox.io/s/0q8yjrz63l

Render Props: https://codesandbox.io/s/69114nj5k

Also in hooks based approach I am getting the error Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Plus a couple of errors which are expected considering the values are animated values

Thanks for the help in advance.