How to use this with functional component?

[Shai]

So I figured using functional component with this approach, but no avail, and this is how i am doing it :

//createRef
const popup = useRef()

//componentDidMount
useEffect(() => {
    popup.show({
          appIconSource: require("./assets/icon.png"),
          appTitle: "Some App",
          timeText: "Now",
          title: "Hello World",
          body: "This is a sample message.\nTesting emoji 😀",
          slideOutTime: 5000
        });
  }, [])


//at the bottom of Components
<NotificationPopup ref={popup} />

I don't know where I am going wrong, the error says :
undefined is not a function (near '...popup.show...')

[Shai]

Never mind sorry, I read the documentation carefully this time and it mentioned to put under navigation, and so I did, with useEffect and modified the usage of ref in my previous attempt to :

<NotificationPopup
            ref={ref => (popup.current = ref)}
          />

and then in useEffect:

pop.current.show({
..
})

it is working now globally like a charm ! :)