Как получить value у input типа hidden в React?

<input type="hidden" name="hidename" value="какое то значение" ref={(input) => { this.hiddenInput = input }} />

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [value, setValue] = React.useState("");
  const [hidden, setHidden] = React.useState("");
  const ref = React.useRef();

  function onInput(event) {
    setValue(event.target.value);
  }

  React.useEffect(() => {
    const observer = new MutationObserver(list => {
      for (const mutation of list) {
        if (mutation.attributeName === "value") {
          setHidden(ref.current.value);
        }
      }
    });

    observer.observe(ref.current, {
      attributes: true
    });

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div className="App">
      <div>Hidden: {hidden}</div>
      <input type="text" value={value} onInput={onInput} />
      <input type="hidden" value={value} ref={ref} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);