I'm creating a custom popup in React that shows up after a button click, and I want to go away from the screen after X amount of seconds. The issue I'm running into is that if you click the button multiple times before the initial timeout ends, you get very strange behavior like the popup jumping in and out or just not showing up at all.

I realize that this is due to me misusing React state, but I am not sure how to get around this issue/structure my code different. Can somebody please help me? I have tried multiple possible solutions for many hours but can't wrap my brain around it.

function popupHandler(popupText, setPopupVis, setPopupText) {
    setPopupText(popupText)
    setPopupVis("visible");
    // Works when you click a button ONCE and then don't touch anything during the timeout windows
    // Totally breaks if you do otherwise. 
    // I want to "extend" the timeout so that the 
    //  popup window keeps staying up if the button keeps getting clicked
    setTimeout(() => {
        setPopupVis("hidden")
    }, 3000);
}

function CustomButton({setPopupText, setPopupVis}) {
    return (
        <button onClick={() => popupHandler("Dynamic string", setPopupText, setPopupVis)}>
            I am a button
        </button>
    )
}

function MyPopUp({popupVis, popupText}) {
    return (
        <div style={{visibility: popupVis}}>
            {popupText}
        </div>
    )
}

export default function MyContent() {
    const [popupVis, setPopupVis] = useState('hidden');
    const [popupText, setPopupText] = useState('')
    return (
        <>
            <CustomButton setPopupText={setPopupText} setPopupVis={setPopupVis} />
            <MyPopUp popupVis={popupVis} popupText={popupText} />
        </>
    )
}