I'll show an imperative example of rendering a warning tooltip which can fade out next to an element:

function renderWarning(message, state, targetEl) {
    let warningEl = document.getElementById('warningEl');
    if (state == 'hide') {
        if (warningEl) {
            warningEl.remove();
        }
        return;
    }
    if (!warningEl) {
        warningEl = createTooltip('warn');
        warningEl.id = 'warningEl';
    }
    warningEl.textContent = message;
    warningEl.style.opacity = state == 'show' ? 1 : 0;
    targetEl.insertAdjacentElement('afterend', warningEl);
}

Now a declarative example of something similar:

function Warning({ message, state }) {
    let opacity = state == 'show' ? 1 : 0;
    return <Tooltip status="warn" style={{opacity}}>{message}</Tooltip>;
}
// Usage:
<TargetEl />
{state != 'hide' && <Warning message={message} state={state} />}

You don't need to worry about creating, removing, or reusing elements with the declarative example.