Small character strings not animating

[roninfrodsham]

I'm testing a navigation for my new website and I'm noticing some strange effects when animating the list items. The animations do not work on a string such as "Chess" but work when I change the string to "React Chess" for example. However if I open dev tools the animations always work. I may be missing something completely but I'm finding it strange that if I change any of the titles to have less than 8 characters the animations don't work.

Here's my code, the problem is item 3 from the nav object is not animating or any if I change to less than 8 characters:

import { motion } from "framer-motion";

type NavigationItems = {
  id: string;
  title: string;
  path: string;
}[];

function Navigation() {
  const PRIMARY_NAV_ITEMS: NavigationItems = [
    {
      id: "nav-item-1",
      title: "Synthesiser",
      path: "/",
    },
    {
      id: "nav-item-2",
      title: "Simon Memory Game",
      path: "/",
    },
    {
      id: "nav-item-3",
      title: "Chess",
      path: "/",
    },
    {
      id: "nav-item-4",
      title: "Kabuto Masks",
      path: "/",
    },
  ];

  const navItemVariants = {
    visible: { opacity: 1, x: 0 },
    hidden: { opacity: 0, x: -100 },
  };

  const transition = {
    duration: 0.5,
    staggerChildren: 0.1,
    type: "spring",
    stiffness: 130,
    damping: 15,
  };

  const whileHover = {
    width: "100%",
    backgroundColor: "#eeabce",
    color: "#00582b",
    transition: {
      duration: 0.01,
      type: "spring",
      stiffness: 300,
      damping: 30,
    },
  };

  return (
    <>
      <nav className='py-6 grow' aria-label='primary'>
        <motion.ul initial='hidden' animate='visible' transition={transition} className='text-2xl'>
          {PRIMARY_NAV_ITEMS.map((item) => (
            <motion.li key={item.id} className='mt-3' variants={navItemVariants}>
              <motion.a
                href={item.path}
                className='py-2 inline-block bg-ronin-green text-ronin-pink'
                whileHover={whileHover}
              >
                <span className='px-6'>{item.title}</span>
              </motion.a>
            </motion.li>
          ))}
        </motion.ul>
      </nav>
    </>
  );
}

export { Navigation };

Many thanks