Framer motion render component animation on each route change

I have a component (Navigation) inside a next.js Layout routed by framer-motion, that renders animation every time I change the route. I want to make it render the animation only the first time I go to the /app page. Tried to use useRef of the component, but it wasn't animating at all. Thanks.

So:

• /app - it renders the animation
• /app/chats - it renders the animation again

Navigation animation rerender example

Navigation component itself

export const UserNavigation = () => {
return (
    <motion.section
      initial={{ x: -56 }}
      animate={{ x: 0 }}
      transition={{bounce: false}}
      className="h-[100%] w-14 bg-gray-900"
    >
      <div className="flex flex-col gap-4 items-center justify-center mt-2">
        <Link href="/app/chats">
          <button
            className={classNames(
              isChatsPage ? "bg-gray-700" : "hover:bg-gray-700",
              "text-white rounded-lg p-2 transition duration-200"
            )}
          >
            <ChatBubbleBottomCenterTextIcon className="w-6 h-6" />
            <span className="sr-only">Chats</span>
          </button>
        </Link>
      </div>
    </motion.section>
  );
};

Layout

export const UserLayout: FC<{ children: ReactNode }> = ({ children }) => {
  return (
    <main className="h-screen w-screen flex">
      <UserNavigation />
      {children}
    </main>
  );
};

Chats page

export const Chats: NextPage = () => {
  return (
    <UserLayout>
      <motion.section
        initial={{ x: -56 }}
        animate={{ x: 0 }}
        transition={{ bounce: false }}
        className="w-72 h-full bg-gray-800"
      ></motion.section>
    </UserLayout>
  );
};