onClick firing despite element not being displayed yet

[lloydjatkinson]

I've got a button component I'm using framer motion with, it slides in but the problem is I can still click it before it's animated in. Here is the usage:

    return (
        <motion.ul
            key={`${track.track.info.name}-${track.track.info.artist}`}
            className="grid grid-cols-1 gap-6 sm:grid-cols-2"
            variants={container}
            initial="hidden"
            animate="visible">
            {
                shuffledAnswers.map((track, index) => (
                    <motion.li key={index} className="item" variants={item}>
                        <Button
                            position={shuffledAnswers.indexOf(track)}
                            onClick={() => onAnswer({ correct: track, chosen: track })}>
                            <span className="flex flex-col gap-1 sm:gap-2 text-sm sm:text-lg">
                                <span>"{track.name}" by</span>
                                <span>{track.artist}</span>
                            </span>
                        </Button>
                    </motion.li>
                ))
            }
        </motion.ul>
    );

And here is the implementation:

const Button = ({ onClick, small = false, children }: { onClick: () => void, small?: boolean, children: React.ReactNode; }) => {
    return (
        <motion.button
            whileHover={{ scale: 1.1, rotate: Math.random() > 0.5 ? 2 : -2 }}
            whileTap={{ scale: 0.9, rotate: Math.random() > 0.5 ? 2 : -2, }}
            transition={{ type: 'spring', stiffness: 400, damping: 6 }}
            className={`relative items-center w-full ${small ? '' : 'h-28 sm:h-32'} px-5 py-4`}
            onClick={onClick}>
            {children}
        </motion.button>
    );
};

What's the correct way of rendering a list while stopping the user being able to click on its content before it's visually there?