How to create a functional push notification (that fires after x amount of time) component with framer x?

I am trying to create a push notification in framer x (react based).

It should work something like this:

customer opens mockup > timer in background starts > timer reaches five and fires event > event triggers push frame > push frame is visible on screen.

I've been playing around for a while now and I just can't figure it out...

in my last attempt I tried to solve it by changing the opacity, but I still can't update the return statement...

import * as React from "react"
import { Frame } from "framer"

export function DraggingA() {
    let counter = 0

    const style = {
        opacity: 0,
    }
    const modalComponentNew = (
        <Frame
            drag={true}
            dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
            dragElastic={1}
            size={150}
            radius={25}
            background={"#06F"}
            center={true}
            opacity={style.opacity}
        />
    )

    let x = setInterval(function() {
        if (counter < 5) {
            counter++
            console.log(counter)
        }

        if (counter >= 5) {
            clearInterval(x)

            style.opacity = 1

            console.log("counter stops")
            return modalComponentNew
        }
    }, 1000)

    return modalComponentNew
}

If you want your component to re-render, you will have to either convert it to a statefull component and call setState after the countdown is done or use a hook.

Here is the new hook syntax :

import React, { useState } from 'react';

export function DraggingA() {
    let counter = 0

    const [opacity, setOpacity] = useState(0); //Create a hook, with 0 as a default value

    const modalComponentNew = (
        <Frame
            drag={true}
            dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
            dragElastic={1}
            size={150}
            radius={25}
            background={"#06F"}
            center={true}
            opacity={opacity} //Gets the hook value
        />
    )

    let x = setInterval(() => { //Arrow function to keep the context
        if (counter < 5) {
            counter++
            console.log(counter)
        }

        if (counter >= 5) {
            clearInterval(x)

            setOpacity(1) //Sets your hook value and re-render your component

            console.log("counter stops")
        }
    }, 1000)

    return modalComponentNew
}