Framer - cannot removeEventListener after changing screen

Question

I am trying to make a page where you can change a type of two sets of objects(by pressing a key)

the size is a value that is being passed to another page, where you can change only the second row objects.

when i run the page where you are not supposed to change the size of an object first, it works fine and i cant change it by pressing a key

BUT when i run the page where you can change the size first and then go to the second page i am still able to change it

somehow i need to stop the eventListener from running on the second page or limit it to run only on the first page... anybody has any idea what am i doing wrong? Thanks a lot! :)

Here is my code:

import type { ComponentType } from "react"
import { useEffect, useRef } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStoreBigger = createStore({ variant: "variant_big_B" })
const useStoreSmall = createStore({ variant: "variant_big_A" })

export function Listener(Component): ComponentType {
    return (props) => {
        const screensBig = ["Screen 4"]
        const screensSmall = ["Screen 1", "Screen 2"]
        const [storeBigger, setStoreBigger] = useStoreBigger()
        const [storeSmaller, setStoreSmaller] = useStoreSmall()
        const variantBigIndex = useRef(0)
        const variantSmallIndex = useRef(0)

        const onKeydown1 = (e) => {
            if (e.key == "w") {
                if (variantSmallIndex.current === 0) {
                    variantSmallIndex.current = 1
                    setStoreSmaller({ variant: "variantB" })
                } else if (variantSmallIndex.current === 1) {
                    variantSmallIndex.current = 2
                    setStoreSmaller({ variant: "variantC" })
                } else if (variantSmallIndex.current === 2) {
                    variantSmallIndex.current = 3
                    setStoreSmaller({ variant: "variantD" })
                } else {
                    variantSmallIndex.current = 0
                    setStoreSmaller({ variant: "variantA" })
                }
            }
        }

        const onKeydown2 = (e) => {
            if (e.key == "w") {
                if (variantSmallIndex.current === 0) {
                    variantSmallIndex.current = 1
                    setStoreSmaller({ variant: "variantB" })
                } else if (variantSmallIndex.current === 1) {
                    variantSmallIndex.current = 2
                    setStoreSmaller({ variant: "variantC" })
                } else if (variantSmallIndex.current === 2) {
                    variantSmallIndex.current = 3
                    setStoreSmaller({ variant: "variantD" })
                } else {
                    variantSmallIndex.current = 0
                    setStoreSmaller({ variant: "variantA" })
                }
            }
        }

        const onKeydown4 = (e) => {
            if (e.key == "w") {
                if (variantBigIndex.current === 0) {
                    variantBigIndex.current = 1
                    setStoreBigger({ variant: "variant_big_A" })
                } else {
                    variantBigIndex.current = 0
                    setStoreBigger({ variant: "variant_big_B" })
                }
            }
        }

        useEffect(() => {
            console.log(props.name)
            if (props.name === "Screen 1") {
                addEventListener("keydown", onKeydown1)
                removeEventListener("keydown", onKeydown2)
                removeEventListener("keydown", onKeydown4)
            }

            if (props.name === "Screen 2") {
                removeEventListener("keydown", onKeydown1)
                addEventListener("keydown", onKeydown2)
                removeEventListener("keydown", onKeydown4)
            }

            if (props.name === "Screen 3") {
                removeEventListener("keydown", onKeydown1)
                removeEventListener("keydown", onKeydown2)
                removeEventListener("keydown", onKeydown4)
            }

            if (props.name === "Screen 4") {
                removeEventListener("keydown", onKeydown1)
                removeEventListener("keydown", onKeydown2)
                addEventListener("keydown", onKeydown4)
            }
        }, [])

        return <Component {...props} />
    }
}

export function Small_Component(Component): ComponentType {
    return (props) => {
        const [storeSmall, setStoreSmall] = useStoreSmall()

        return <Component {...props} variant={storeSmall.variant} />
    }
}

export function Bigger_Component(Component): ComponentType {
    return (props) => {
        const [storeBigger, setStoreBigger] = useStoreBigger()

        return <Component {...props} variant={storeBigger.variant} />
    }
}
import type { ComponentType } from "react"
import { useEffect, useRef } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStoreBigger = createStore({ variant: "variant_big_B" })
const useStoreSmall = createStore({ variant: "variant_big_A" })

export function Listener(Component): ComponentType {
    return (props) => {
        const screensBig = ["Screen 4"]
        const screensSmall = ["Screen 1", "Screen 2"]
        const [storeBigger, setStoreBigger] = useStoreBigger()
        const [storeSmaller, setStoreSmaller] = useStoreSmall()
        const variantBigIndex = useRef(0)
        const variantSmallIndex = useRef(0)

        const onKeydown1 = (e) => {
            if (e.key == "w") {
                if (variantSmallIndex.current === 0) {
                    variantSmallIndex.current = 1
                    setStoreSmaller({ variant: "variantB" })
                } else if (variantSmallIndex.current === 1) {
                    variantSmallIndex.current = 2
                    setStoreSmaller({ variant: "variantC" })
                } else if (variantSmallIndex.current === 2) {
                    variantSmallIndex.current = 3
                    setStoreSmaller({ variant: "variantD" })
                } else {
                    variantSmallIndex.current = 0
                    setStoreSmaller({ variant: "variantA" })
                }
            }
        }

        const onKeydown2 = (e) => {
            if (e.key == "w") {
                if (variantSmallIndex.current === 0) {
                    variantSmallIndex.current = 1
                    setStoreSmaller({ variant: "variantB" })
                } else if (variantSmallIndex.current === 1) {
                    variantSmallIndex.current = 2
                    setStoreSmaller({ variant: "variantC" })
                } else if (variantSmallIndex.current === 2) {
                    variantSmallIndex.current = 3
                    setStoreSmaller({ variant: "variantD" })
                } else {
                    variantSmallIndex.current = 0
                    setStoreSmaller({ variant: "variantA" })
                }
            }
        }

        const onKeydown4 = (e) => {
            if (e.key == "w") {
                if (variantBigIndex.current === 0) {
                    variantBigIndex.current = 1
                    setStoreBigger({ variant: "variant_big_A" })
                } else {
                    variantBigIndex.current = 0
                    setStoreBigger({ variant: "variant_big_B" })
                }
            }
        }

        useEffect(() => {
            console.log(props.name)
            if (props.name === "Screen 1") {
                addEventListener("keydown", onKeydown1)
                removeEventListener("keydown", onKeydown2)
                removeEventListener("keydown", onKeydown4)
            }

            if (props.name === "Screen 2") {
                removeEventListener("keydown", onKeydown1)
                addEventListener("keydown", onKeydown2)
                removeEventListener("keydown", onKeydown4)
            }

            if (props.name === "Screen 3") {
                removeEventListener("keydown", onKeydown1)
                removeEventListener("keydown", onKeydown2)
                removeEventListener("keydown", onKeydown4)
            }

            if (props.name === "Screen 4") {
                removeEventListener("keydown", onKeydown1)
                removeEventListener("keydown", onKeydown2)
                addEventListener("keydown", onKeydown4)
            }
        }, [])

        return <Component {...props} />
    }
}

export function Small_Component(Component): ComponentType {
    return (props) => {
        const [storeSmall, setStoreSmall] = useStoreSmall()

        return <Component {...props} variant={storeSmall.variant} />
    }
}

export function Bigger_Component(Component): ComponentType {
    return (props) => {
        const [storeBigger, setStoreBigger] = useStoreBigger()

        return <Component {...props} variant={storeBigger.variant} />
    }
}