Get an error massage when I try to use React Spring on my Next.js server component.

[RobinArtemstein]

Greeting...

It's my first time to try React spring.

First, I install React spring with Yarn, then I try to use it on my Next.js server component.

Here is the complete code in /app/page.tsx.

import { useTransition, animated } from '@react-spring/web'

export default function Home({ data = [1, 2, 3] }) {
    const [transitions, api] = useTransition(data, () => ({
    from: { opacity: 0, y: 100 },
    enter: { opacity: 1, y: 0 },
    leave: { opacity: 0, y: 100 },
  }))

  return(
    <animated.div>
      <div className="w-full justify-items-center p-10 min-h-[calc(100vh-8rem)] bg-green-100 text-black">
        <h1 className="text-4xl font-bold mb-6">Welcome to our company</h1>
        <p className="text-lg">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat quam vel libero tristique tristique. Nullam nibh turpis, pretium et nisi ac, imperdiet tempus mauris. Praesent nunc lectus, sollicitudin ut ornare id, ullamcorper eu arcu. Integer ipsum lorem, fermentum quis dui non, molestie viverra risus. Nam cursus tellus id mauris consectetur finibus. Duis ipsum dui, hendrerit ut rhoncus vitae, convallis at lacus. Ut eget ullamcorper lacus, quis mattis orci.
        </p>
      </div>
    </animated.div>
  );
}

When I run yarn run dev command, I get this error message, here is the screenshot link.

https://i.imgur.com/fV76ZXz.png

I'm wondering if React Spring does not work for Next.js server component.

Thank you for any advice in advance.