How do I make a circular border in CSS in which x% is red and the rest is white, with x being a state variable in a javascript file?

I am making a timer app in which there is initially a white ring surrounding the time remaining. I want to color the ring surrounding the time remaining to slowly turn red, with it being completely red as the time runs out.

<div className="countdown-timer">
     <span>{remainingTime.hours}</span>
     <span>:</span>
     <span>{remainingTime.minutes}</span>
     <span>:</span>
     <span>{remainingTime.seconds}</span>
</div>

.countdown-timer {
    width: 400px;
    height: 400px;
    border: 6px solid white;
    border-radius: 50%;
    box-shadow: black;

    font-family: "DM Sans";
    font-size: 72px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

I tried an approach with concentric circles but did not get the intended effect I wanted.

This is what I am going for: https://i.stack.imgur.com/AVOz3.png

<div>
  {remaining.Time.seconds > X.time?(
  <div className="countdown-timer">
      <span>{remainingTime.hours}</span>
      <span>:</span>
      <span>{remainingTime.minutes}</span>
      <span>:</span>
      <span>{remainingTime.seconds}</span>
  </div>):(
    <div className="countdown-timer2">
      <span>{remainingTime.hours}</span>
      <span>:</span>
      <span>{remainingTime.minutes}</span>
      <span>:</span>
      <span>{remainingTime.seconds}</span>
  </div>

  )
  }
</div>

---------------------------CSS File----------------------------------------

.countdown-timer {
    width: 400px;
    height: 400px;
    border: 6px solid white;
    border-radius: 50%;
    box-shadow: black;

    font-family: "DM Sans";
    font-size: 72px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.countdown-timer2 {
    width: 400px;
    height: 400px;
    border: 6px solid white;
    border-radius: 50%;
    box-shadow: black;
    border-color: red;

    font-family: "DM Sans";
    font-size: 72px;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

where X.time is the time above which it should remain white while less than that it will turn red

Try conic-gradient

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

function Timer() {
  const [remainingTime, setRemainingTime] = React.useState({
    hours: 0,
    minutes: 0,
    seconds: 0
  });
  return ( <
    div className = "countdown-timer"
    style = {
      {
        "--x": 0.75
      }
    } >
    <
    span > {
      remainingTime.hours
    } < /span> <
    span >: < /span> <
    span > {
      remainingTime.minutes
    } < /span> <
    span >: < /span> <
    span > {
      remainingTime.seconds
    } < /span> <
    /div>
  );
}
ReactDOM.createRoot(document.getElementById("app")).render( < Timer / > );

<!-- language: lang-css -->

:root {
  --bg: purple;
}

body {
  background: var(--bg);
}

.countdown-timer {
  width: 400px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: black;
  font-family: "DM Sans";
  font-size: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  --x: 0;
  --deg: calc(calc(1 - var(--x)) * 360deg);
  background: conic-gradient(white 0deg, white var(--deg), var(--deg), red 360deg);
}

.countdown-timer::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background-color: var(--bg);
}

.countdown-timer span {
  position: relative;
  z-index: 1;
}

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

<!-- end snippet -->