Animation stop working on conditional rendering ..!!

const Products = ({
  product: { name, displayImage, subtitle, price, uuid, slug },
}) => {
  const [show, setShow] = useState(false);

  const clickVariants = {
    opened: {
      top: "50vh",
    },
    closed: {
      top: "0vh",
    },
  };

  return (
    <>
      <div className="products">
      <motion.button onClick={() => setShow((state) => !state)}>
                Buy
                </motion.button>
              </div>
      {show && (
        <>
          <div
            onClick={() => setShow((state) => !state)}
            className="backdrop"
          ></div>
          <motion.div
            initial={false}
            animate={show ? "opened" : "closed"}
            variants={clickVariants}
            className="modal__container"
          >
            <h1>{name}</h1>
          </motion.div>
        </>
      )}
    </>
  );
};

export default Products;