Esperaba obtener su ayuda con un problema que he tenido con useRef y Framer motion.

Actualmente estoy creando un componente de carrusel para elementos destacados que podría tener cualquier cantidad de diapositivas según las etiquetas del usuario.

El problema que tengo es que cuando se cambia el tamaño del dom, la referencia ya no calcula las restricciones de arrastre correctas y no puedo desplazarme por la lista completa en el eje X.

Aquí está el código

 import { motion } from 'framer-motion'; import SliderStyles from './Slider.module.scss'; import Button from '@components/buttons/Button'; type SliderProps = { images: string[]; }; const Slider = ({ images }) => { const sliderRef = useRef(null); const [width, setWidth] = useState(0); useEffect(() => { if (sliderRef.current) { const { clientWidth, scrollWidth } = sliderRef.current; setWidth(-(scrollWidth - clientWidth)); } }, []); return ( <motion.div className={SliderStyles.Slider} ref={sliderRef}> <motion.div className={SliderStyles.SliderTrack} drag="x" dragConstraints={{ right: 0, left: width - 50, }} > {images.map((image, index) => ( <div className={SliderStyles.SliderItem} key={image + index.toString()} > <div className={SliderStyles.SliderOverlay}> <h3>Product Name</h3> <Button type="button">Order Now</Button> </div> <img src={image} alt="slider item" /> </div> ))} </motion.div> </motion.div> ); }; export default Slider;

Gracias de antemano, cualquier ayuda es apreciada!