Changing background colour with fetch results

Question

I am trying to change the background color of an item depending on what I receive from my fetched function, basically, if I receive a number bigger than 1, I want it to be green, and if 0, I want it to be red:

This is my javascript:

const pegsData_url = "https://fakestoreapi.com/products";
const uiProgressBar = document.querySelector(`.${name}-bar-fill`);
const pegs1 = document.getElementById("total-time-1");


async function isActive(){
const response = await fetch(pegsData_url)
const data = await response.json();
console.log(data);
if(data[1].price >= 10){
  console.log(true);
  uiProgressBar.style.background = "green";
}else{
  console.log(false);
  uiProgressBar.style.background = "red";
}

CSS:

.peg-1-bar{
  background-color: grey;
  border-radius: 50px;
  height: 20px;
  width: 400px;
  margin-left: 30px;
}

.peg-1-bar-fill{
  border-radius: 50px;
  height: 100%;
  width: 100%;
  max-width: 400px;
}

html:

<div class="peg-wrapper">
  <div class="peg-name-1">
          <h4>1</h4>
        </div>
        <div class="peg-1-start-time total-time">
          <p class="label-2">Length:</p>
          <span id="total-time-1">-</span>
        </div>
        <div class="peg-1-bar">
          <div class="peg-1-bar-fill">
          </div>
        </div>
         </div>

I keep having the following error: TypeError: Cannot read properties of null (reading 'style'), any suggestions on how to fix this?