modal issue

app.ts

import { Data, animate, Override, Animatable } from "framer";
import { button } from "./canvas";

const data = Data({
  buttonOpacity: Animatable(0),
  buttonScale: Animatable(0),
  buttonOffset: Animatable(-20),
  modalOpacity: Animatable(0),
  modalVisibility: false
});

export const hoverPostImageArea: Override = () => {
  return {
    background: "transparent",

    onTap(e) {
      animate.spring(data.buttonOpacity, 1, { duration: 0.2 });
      animate.spring(data.buttonScale, 1, { duration: 0.3 });
      animate.spring(data.buttonOffset, 10, { duration: 0.3 });
      console.log("tap on image");
    }
  };
};

export const toggleButtonVisibility: Override = () => {
  return {
    opacity: data.buttonOpacity,
    scale: data.buttonScale,
    bottom: data.buttonOffset,

    onTap() {
      data.modalVisibility = true;
      animate.spring(data.modalOpacity, 1, { duration: 0.3 });
      console.log("tap on button");
    }
  };
};

export const dim: Override = () => {
  return {
    visible: data.modalVisibility,
    background: "black",
    opacity: data.modalOpacity,

    onTap() {
      animate.spring(data.modalOpacity, 0, { duration: 0.3 });
      console.log("tap on modal");
      // console.log("lol");
    }
  };
};