My div is not moving when using Framer Motion in React

Question

It was supposed to be a div down when I scroll the page, but that doesn’t happen. Someone could tell me the possible reasons?

const { scrollYProgress } = useViewportScroll();
const frameTop = useTransform(scrollYProgress, [0.00, 0.082], ['17%', '10.5%']);

    return (

        <motion.div id="container-menu" style={{
            width: '42vh',
            height: '80vh',
            top: frameTop,
            bottom: 0,
            left: 0,
            right: 0,
            marginLeft: '-15vw',
            backgroundColor: '#FFF',
            borderRadius: '0 2h 2vh 0',
            boxShadow: '0px 4px 4px rgb(0, 0, 0, 0.25)',
            position: 'fixed',
            display: 'flex',
            justifyContent: 'space-between',
            cursor: 'default',
            transition: 'all 0.3s'
        }}>