score:1

Accepted answer

you should not be reaching into the dom to set the transform. you should remove the queryselector line from your input.

<input
  type="number"
  max={359}
  value={value}
  onchange={(e) => {
    setvalue(e.target.value);
    // don't do this 👇
    document.queryselector("h1").style.transform = `rotate(${value}deg)`;
  }}
/>

the state change will trigger a re-render, so just set the transform during render:

<h1
  style={{
    transform: `rotate(${value}deg)`,
    border: "1px solid pink",
    display: "inline",
    padding: "10px"
  }}
>

Related Query

More Query from same tag