Estoy creando una aplicación usando React, framer-motion y react-intersection-observer. Dentro de animation.js tengo una función que se importa dentro de App.js y se usa como componente en App.js.

Quiero aplicar una relación de aspecto a algunos divs usando el estilo como parámetro, pero no funciona.

 <FadeAnimation name={'project-image--image'} style={'--ratio':16/9} /> Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.

Tengo otros divs con esta propiedad y se muestran correctamente

 <div className='project-image--image' style={{'--ratio':1/2}}/>

Animación.js

 export const container = { hidden: { opacity: 0, y: 5 }, visible: { opacity: 1, y: 0 } } function FadeAnimation({ children, name, delay, duration, style }) { const controls = useAnimation(); const [ref, inView] = useInView(); useEffect(() => { if (inView) { controls.start("visible"); } }, [controls, inView]); return ( <motion.div className={`${name}`} style={{`${style}`}} ref={ref} animate={controls} initial="hidden" transition={{ duration: duration, delay: delay }} variants={{ visible: { opacity: 1, y: 0 }, hidden: { opacity: 0, y: 5 } }} > {children} </motion.div> ); }