[BUG] If you use the css variable in the background color to animate it, it may not work at some circumstance.

[sukjae]

Describe the bug

If you use the css variable in the background color to animate it, it may not work at some circumstance.

IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-background-animatable-ilqf6x?file=/src/App.js

<motion.div
  id="first"
  style={{
    width: 100,
    height: 100,
    backgroundColor: "#ff4400",
    "--adaptiveBlue200": "#8b95a1"
  }}
  animate={{
    backgroundColor: "#8b95a1" // working
    // backgroundColor: ["#ff4400", "#8b95a1"] // working
    // backgroundColor: [null, "#8b95a1"] // working
    // backgroundColor: "var(--adaptiveBlue200, none)" // working
    // backgroundColor: [null, "var(--adaptiveBlue200, #fff)"] // error: 'var(--adaptiveBlue200, #fff)' is not an animatable color. Use the equivalent color code instead.
  }}
  transition={{
    duration: 3
  }}
/>

Steps to reproduce

1. animate backgroundColor with array
2. first item of array should be null
3. second item of array should be css variable

from this code, only allows hex, rgba, hsla for colorTypes. Perhaps add css variable?