How to use the framer-motion.motion.svg function in framer-motion

const OuterWrapper = styled(motion.div)`
  position: relative;
  height: 100%;
  padding-top: ${c.XL8};
  z-index: 1;

  @media (max-height: 400px) {
    padding-top: ${c.XL7};
    nav > div {
      margin-bottom: 0;
    }
  }
`

const MorphSvg = styled(motion.svg)`
  position: absolute;
  width: 120%;
  height: 110%;
  top: -5%;
  left: 130%;
  fill: ${c.WHITE};
`

const startPath =
  "M574.3-36.1c0,0-554.7-140.5-547.7,46.1s523.2,94.9,522,258.1c-1.2,163.1-276,298.8,25.8,354.9"
const endPath =
  "M574.9-36.1c0,0-514.3-75-543.8,36.1c-46.7,175.6-20.9,497.5,13.7,563.5C76.6,624,422.8,611.3,574.9,623"

const interpolator = interpolate([startPath, endPath], {
  addPoints: 0,
  origin: { x: 0, y: 0 },