Using Framer-motion with NextJS (v13.x.x) and getting error: "Prop `data-projection-id` did not match. Server: "null" Client: "4" at li"

Using framer motion in one of my Next JS project. Getting an unusual console error while trying reloading the page.

The page is using SSR from the most recent version of Next JS (V13.X.X). Error describes as:

Warning: Prop data-projection-id did not match. Server: "null" Client: "4" at li at MotionComponent

The problem is mainly with the hydration, but I am unsure how to avoid the console error.

There is some discrepancy with server and client version of the rendered code.

Below posting the HTML:

<div className='flex flex-col my-4'>
    <h3 className='text-xl font-bold text-red-400'>Overview</h3>
    <p className='my-2 text-base font-semibold text-red-400'>
        {fruit!.overview}
    </p>
</div>
<div className='flex flex-col my-4'>
    <h3 className='text-xl font-bold text-red-400'>Vitamins Present</h3>
    <motion.ul className={ 'flex flex-row flex-wrap my-4 ' + (fruit!.vitamins?.length> 3 ? 'justify-between' : 'justify-normal')} variants={vitCardContainer} initial='hidden' animate='visible'>
        {fruit!.vitamins?.slice(0, 6).map((c, i) => (
        <motion.li key={'fruit-vitamins-' + c.id} variants={vitCardItems} className={fruit!.vitamins?.length> 3 ? '' : 'pr-4'}
            >
            <Vitamin id={c.id} name={c.name} character={c.character} profile_path={c.profile_path} />
        </motion.li>
        ))}
    </motion.ul>
</div>

Providing the React snippet for Framer-motion variable and the code as much possible

'use client';

import { motion } from 'framer-motion';

import Vitamin from '@/components/vitamin';

const Fruit = ({ fruit }) => {
  const vitCardContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        delayChildren: 0.125,
        staggerChildren: 0.05,
      },
    },
  };
  const vitCardItems = {
    hidden: { opacity: 0, scale: 0.8 },
    visible: { opacity: 1, scale: 1, transition: { duration: 0.25 } },
  };

  return (
    <section>
      <h1 className='text-2xl font-bold text-red-600'>{fruit!.name}</h1>
      <div className='flex flex-col my-4'>
        <h3 className='text-xl font-bold text-red-400'>Overview</h3>
        <p className='my-2 text-base font-semibold text-red-400'>
          {fruit!.overview}
        </p>
      </div>
      <div className='flex flex-col my-4'>
        <h3 className='text-xl font-bold text-red-400'>Vitamins Present</h3>
        <motion.ul
          className={
            'flex flex-row flex-wrap my-4 ' +
            (fruit!.vitamins?.length > 3 ? 'justify-between' : 'justify-normal')
          }
          variants={vitCardContainer}
          initial='hidden'
          animate='visible'
        >
          {fruit!.vitamins?.slice(0, 6).map((c) => (
            <motion.li
              key={'fruit-vitamins-' + c.id}
              variants={vitCardItems}
              className={fruit!.vitamins?.length > 3 ? '' : 'pr-4'}
            >
              <Vitamin
                id={c.id}
                name={c.name}
                character={c.character}
                profile_path={c.profile_path}
              />
            </motion.li>
          ))}
        </motion.ul>
      </div>
    </section>
  );
};

export default Fruit;

Later it was found, that updating both "next" and "framer-motion" npm library using "npm update" fixed the issue.

If you are finding this similar issue please give "npm update" a try first and then check for other solutions.