[BUG] MotionValues cannot be used in motion.g element's transform attribute

[jdthorpe]

1. Read the FAQs 👇

2. Describe the bug

Unlike other SVG attributes (such as a circle's cx attribute) motion values cannot be used with a <motion.g> element's transform attribute.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

See this sandbox

4. Steps to reproduce

1. Open the sandbox. Notice that the fill attribute applied to the <g> element is applied and propagated to the rect, but that the rect does not move.
2. Open the console and notice that the motionValue is being updated, so that's not the problem.
3. Right click on the rect and open the inspector. Look at the <g> element that is the parent of the <rect> element and notice that it's transform attribute is set to [object Object] instead of the value of the motionValue ("transform(50 50)").

5. Expected behavior

<motion.g> elements should be able to use motionValues for all of their attributes, including the transform attribute.

6. Video or screenshots

See the sandbox above

7. Environment details

Chrome and Edge for Mac