How to render a popup by calling a function?

I want to render an element in React just by calling a function.

Usually you'd use a component (let's say a Popup) that takes a boolean from state to make it appear or not and change it with some callback handler. Something like this:

import React, { useState } from "react";

import Popup from "somecomponentlibrary";
import { Button } from "pathtoyourcomponents";

export const SomeComponent = () => {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button onClick={() => { setOpen(true); }}>
                this opens a modal
            </Button>
            <Popup type={"info"} open={open} timeout={1000}>
                text within modal
                <Button onClick={() => { setOpen(false); }}></Button>
            </Popup>
        </>
    );
};

I was wondering if instead of returning it in the component as above I could just call some method to just show it on the screen like that:

import React from "react";

import { Button, popup } from "pathtoyourcomponents";

export const SomeComponent = () => {
    return (
        <>
            <Button onClick={() => { popup.info("text within modal", 1000); }}>
                this opens a modal
            </Button>
        </>
    );
};

How do I write the popup function in order to render a Popup component in the DOM in such way?

from How to render a popup by calling a function?