Attaching Zoom in/out functionality to buttons [duplicate]

I’ve added a zoom in and out functionality to my art portfolio. I’ve build it using Framer and and im using code override to make sure the zoom in and out functionality works. It does seem to work (through using scrolling up and down). But the code also features a override for 2 buttons on the page which when clicking on them should zoom in and out of the canvas, this is not working at the moment and I cant seem to figure out why.

I’m using the following code snippet to zoom in and out of the canvas:

import { useState, useEffect } from "react"
import { Override, Data } from "framer"

const zoomData = Data({
    scale: 1,
    zoomSpeed: 0.05,
    minZoom: 0.5,
    maxZoom: 3,
})

export function useZoomableCanvas(): Override {
    const [scale, setScale] = useState(zoomData.scale)

    // Function to handle wheel zoom
    useEffect(() => {
        const handleWheel = (event) => {
            event.preventDefault() // Prevent default scrolling behavior

            if (event.deltaY < 0) {
                // Zoom in
                setScale((prevScale) =>
                    Math.min(prevScale + zoomData.zoomSpeed, zoomData.maxZoom)
                )
            } else {
                // Zoom out
                setScale((prevScale) =>
                    Math.max(prevScale - zoomData.zoomSpeed, zoomData.minZoom)
                )
            }
        }

        window.addEventListener("wheel", handleWheel, { passive: false })

        return () => {
            window.removeEventListener("wheel", handleWheel)
        }
    }, [])

    // Zoom in function for buttons
    const zoomIn = () => {
        setScale((prevScale) =>
            Math.min(prevScale + zoomData.zoomSpeed, zoomData.maxZoom)
        )
    }

    // Zoom out function for buttons
    const zoomOut = () => {
        setScale((prevScale) =>
            Math.max(prevScale - zoomData.zoomSpeed, zoomData.minZoom)
        )
    }

    return {
        style: {
            transform: `scale(${scale})`,
            transition: "transform 0.3s ease",
        },
        onClickZoomIn: zoomIn,
        onClickZoomOut: zoomOut,
    }
}

// Button overrides for zoom in/out
export function ZoomInButton(): Override {
    const { onClickZoomIn } = useZoomableCanvas()
    return {
        onTap: onClickZoomIn,
    }
}

export function ZoomOutButton(): Override {
    const { onClickZoomOut } = useZoomableCanvas()
    return {
        onTap: onClickZoomOut,
    }
}

The “UseZoomableCanvas” works, but the other 2 functions are not working “ZoomInButton” & “ZoomOutButton”.

This is the URL i’m working on https://www.jesper.studio/playground/visual-summaries

Could someone help me with this?

I’ve tried to sort it out using various AI assistents, but I cant seem to get it to work.