React paint flash in a simple example (comparison)

In a simple react app (create-next-app) with two counters, ‘paint flash’ utility in Chrome shows a lot of repainting.

function Counter() {
const [val, setVal] = useState(0);

  return (<>
    <p>{val}</p>
    <button onClick={() => { setVal(val + 1) }}>increment</button>
    <button onClick={() => { setVal(val - 1) }}>decrement</button>
  </>)
}

function App() {
  return <>
    <Counter />
    <Counter />
  </>
}

On the other hand, DOM manipulation with JS achieves minimum repaints.

<p id="val0"></p>
<button id="inc0">increment</button>
<button id="dec0">decrement</button>

<p id="val1"></p>
<button id="inc1">increment</button>
<button id="dec1">decrement</button>

<script>
    let v0 = 0;
    let v1 = 0;

    let val0 = document.getElementById("val0")
    let val1 = document.getElementById("val1")
    let inc0 = document.getElementById("inc0")
    let inc1 = document.getElementById("inc1")
    let dec0 = document.getElementById("dec0")
    let dec1 = document.getElementById("dec1")

    val0.innerText = v0;
    val1.innerText = v1;

    inc0.onclick = () => {val0.innerText = ++v0;}
    inc1.onclick = () => {val1.innerText = ++v1;}

    dec0.onclick = () => {val0.innerText = --v0;}
    dec1.onclick = () => {val1.innerText = --v1;}

</script>

export default App

Is there something I can do to remove the repaints or is this React’s core inefficiency? Also, is my intuition to trust Chrome’s ‘paint flash’ more than ‘React dev tools’ correct?