framer-motion: How do you share different animations between parent and child components?

Question

I was making a navigationbar.
And I would like to add scale effect and underline effect when mouse is placed on the button.
I made a lower component in the component and added animation using framer-motion.
However, if i mouse over the underline, it works well, but i mouse over the item component, the underline animation effect does not work.
Attempt to resolve with LayoutGroup failed. plz help..

const itemBtnVariant = {
    normal: {},
    action: {
      scale: 1.2,
    },
    underAction: {
      opacity: 1,
      width: "30px",
    },
  };

const Item = styled(motion.li)<{ route: boolean }>`
  position: relative;
  margin-right: 20px;
  display: flex;
  justify-content: center;

`;
const UnderBar = styled(motion.div)`
  position: absolute;
  background-color: white;
  width: 15px;
  height: 1px;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: 0 auto;
`;

<Link to={"/"}>
            <LayoutGroup>
              <Item
                layout
                variants={itemBtnVariant}
                initial="normal"
                whileHover="action"
                layoutId="1"
                route={Boolean(homeRoute)}
              >
                Home
                <UnderBar
                  layout
                  variants={itemBtnVariant}
                  initial="normal"
                  layoutId="1"
                  whileHover="underAction"
                />
              </Item>
            </LayoutGroup>
          </Link>

Answer 1

I solved it.
The key was inheritance.
Make itemBtnVariant and underBarVariant the same property.
Because animation is inherited from parent to child.
Therefore, you use variants and animations for the parent component and only
change variants for the child component.

 const itemBtnVariant = {
    normal: {
      scale: 1,
    },
    action: {
      scale: 1.2,
    },
  };
  const underBarVariant = {
    normal: {
      opacity: 1,
      scale: 1,
      width: "15px",
    },
    action: {
      opacity: 1,
      width: "30px",
    },
  };

              <Item
                variants={itemBtnVariant}
                whileHover="action"
                initial="normal"
                route={Boolean(homeRoute)}
              >
                Home
                <UnderBar variants={underBarVariant} />
              </Item>