How to use just appended style link as CSSStylesheet in JavaScript

I tried to add style link in an HTML page and insert rule

let linklength = document.head.querySelectorAll("link[rel=stylesheet]").length;
let style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("href", "./test.css");
document.head.appendChild(style);
let myStyle = document.styleSheets[linklength];
myStyle.insertRule(".red{color:red}");

But myStyle is undefined and new style didn’t add in document.styleSheets.
I could solve as follows

let linklength = document.head.querySelectorAll("link[rel=stylesheet]").length;
let style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("href", "./test.css");
document.head.appendChild(style);
setTimeout(() => {
    let myStyle = document.styleSheets[linklength];
    myStyle.insertRule(".red{color:red}");
}, 5000);

but I want to insert rule immediately.
I’ve already set timeout 0 milisecond but it didn’t work.

const link = document.createElement("link");
link.href = "https://code.jquery.com/jquery-3.5.1.min.js"; //your url
console.log(document.styleSheets.length);
link.rel = "stylesheet";
document.head.appendChild(link);
link.addEventListener("load",yourHandler);
function yourHandler(){
   console.log(document.styleSheets.length);
   link.removeEventListener("load",yourHandler);
}