I'm trying to figure out why some of my elements are being reset when functions are called. I don't think the page is refreshed when they are called, so my question is how do I stop this from happening? Or may I have some links to learn about this issue? I'm not too familiar with the terminology so searching hasn't been too helpful

One example element that is being reset is my checkbox (which is connected to line-through styling, which is also reset) and this happens every time the clock on my site refreshes with an updated time through setInterval. It also resets whenever I add a new list element to my site. I hope my question makes sense, thanks in advance! Here's some of my code if it's relevant:

  const currentTime = new Date().toLocaleTimeString();
  const [time, setTime] = useState(currentTime);

  function getTime(event) {
    const newTime = new Date().toLocaleTimeString();
    setTime(newTime);
  }

  setInterval(getTime, 1000);

const [isComplete, setIsComplete] = useState(false);

  function strike() {
    setIsComplete(!isComplete);
  }

 <li style={{ textDecorationLine: isComplete && "line-through" }}>
          {props.text}
        </li>
      </div>
      <div className="item-buttons">
        <button onClick={strike}>-</button>
        <button
          onClick={() => {
            props.onDelete(props.id);
          }}
        >
          x
        </button>