So, I have this basic code below.

In the code when the user clicks on the button, it focuses on the input field and types in the word "test".

How does this happen since the state is never changed? i.e since a "re-render" is not occurring- how does the view change?

import { useRef } from "react";

const App = () => {
  const inputRef = useRef(null);
  const handleClick = () => {
    inputRef.current.focus();
    inputRef.current.value = "test";
  };

  return (
    <>
      <input ref={inputRef}></input>
      <button onClick={handleClick}>Click me!!</button>
    </>
  );
};