document.execCommand("copy") not working when using timeout

Question

As mentioned in the title of the question, I am using window.setTimout in my application. Here is the detailed explanation. When a user clicks a button I call a function, passing the value that needs to be copied to the clipboard, after 30 seconds I need to clear the clipboard. As I searched the internet I found out that there is no way to clear the clipboard data, so I am calling another function to select and copy an 'empty space' value. Here is the code.

function copyToClipboard(value, e){
    var abc = document.createElement("input");
    abc.setAttribute("value", value);   
    document.body.appendChild(abc);
    abc.select();
    document.execCommand("copy");
    document.body.removeChild(abc);
    
    setTimeout(clearClipboard, 30000);
}

function clearClipboard(){
    var def = document.createElement("input");
    def.setAttribute("value", ' ');
    document.body.appendChild(def);
    def.select();
    document.execCommand("copy");
    document.body.removeChild(def);

    console.log('clipboard cleared!');
}

When this code is being executed, the passed value is being copied to the clipboard as expected, but after 30 seconds the clearClipboard method is not emptying the clipboard as it should do. ONE MORE THING! WHEN I SET THE TIMER TO 3 SECONDS, IT SUDDENLY STARTS TO WORK AS EXPECTED AND CLEARS THE CLIPBOARD! HELP!