diff --git a/hyperglass/ui/components/util/animated.ts b/hyperglass/ui/components/util/animated.ts
index 99fb7dc..2176d00 100644
--- a/hyperglass/ui/components/util/animated.ts
+++ b/hyperglass/ui/components/util/animated.ts
@@ -1,8 +1,13 @@
 import { chakra } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 
-export const AnimatedDiv = motion.custom(chakra.div);
-export const AnimatedForm = motion.custom(chakra.form);
-export const AnimatedH1 = motion.custom(chakra.h1);
-export const AnimatedH3 = motion.custom(chakra.h3);
-export const AnimatedButton = motion.custom(chakra.button);
+/**
+ * Even though this seems to do nothing, this fixes the issue of Chakra Factory forwarding
+ * framer-motion props when it shouldn't.
+ *
+ * @see https://chakra-ui.com/docs/features/chakra-factory
+ */
+const shouldForwardProp = () => true;
+
+export const AnimatedDiv = chakra(motion.div, { shouldForwardProp });
+export const AnimatedForm = chakra(motion.form, { shouldForwardProp });