How to animate custom r3f components most performantly

[hatsumatsu]

I'm currently testing useTransition in react-three-fiber and was wondering what the most performant way is to animate custom components.

https://codesandbox.io/s/r3f-react-spring-transitions-5skgpc

In this test case I transition a custom component <Item /> that contains an <animated.group />.
I pass the transition styles (like position and opacity) from the useTransition render function as props to use them inside the component.

I was expecting the component to update/render frequently during the transition but logging rerenders showed that it just rerenders a few times (which seems great for perf!).

Next to it I wrapped my custom component via animated liek const AnimatedItem = animated( Item ) . To my surprise this transition renders the component frequently during the transition.

So am I right to assume that using a regular component and passing transition values as props is more performant than wrapping it via animated()?

function Item({item = {}, y = 0}) {
  return <animated.group position-y={y} />
}

function AnimatedItem = animated(Item);

function Parent() {
  const transition = useTransition(currentIndex, {
    from: { y: -3 },
    enter: { y: 0 },
    leave: { y: 3 }
  });

  return (
    <>
      {transition((transitionProps, _currentIndex) => (        
          <>
            <Item
              item={items[_currentIndex]}
              y={transitionProps.y}
            />

            // which one is more performant???

            <AnimatedItem
              item={items[_currentIndex]}
              y={transitionProps.y}
            />
          </>
      ))}
    </>
  );
}