insertRule() not inserting rule but not giving any errors

I am trying to insert a style rule directly into the head of a document.

It inserts the style element but not the code itself. No errors or anything.

var thumbStyles = document.createElement("style"); 
    document.head.appendChild(thumbStyles);
    thumbStyles.sheet.insertRule(
    "figure#styleThumbs { 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
    } 
    ")
    thumbStyles.sheet.insertRule(
    "figure#styleThumbs img { 
    outline: 1px solid black; 
    cursor: pointer; 
    opacity: 0.75; 
    } 
    ")
    thumbStyles.sheet.insertRule(
    "figure#styleThumbs img:hover { 
    outline: 1px solid red; 
    opacity: 1.0; 
    } 
    ");

Picture of HTML Head with style but no style code

I also asked this question on FCC but have no answers

Answer

The inserted CSS is not displayed in the DOM, but it does work.

var thumbStyles = document.createElement("style"); 
document.head.appendChild(thumbStyles);
thumbStyles.sheet.insertRule(`#test{
background-color: dodgerblue;
}`);

<div id="test">
This is a test
</div>