You can use document.getElementById().value

export default function App() {
  function getText() {
    var myInputText = document.getElementById('myInput').value;
    console.log('Input text:', myInputText);
  }
  return (
    <div>
      <input id="myInput" />
      <button onClick={() => getText()}>Get Text</button>
    </div>
  );
}

Or You can use Forms and useState Hook

export default function App() {
  const [name, setText] = useState('');

  const handleSubmit = (evt) => {
    evt.preventDefault();
    console.log(`Input text: ${name}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setText(e.target.value)}
      />
      <input type="submit" value="Submit" />
    </form>
  );
}

1) Controlled input using useState hook

  const [inputValue, setInputValue] = useState("");

  function onInputChange(e) {
    setInputValue(e.target.value);
  }

  const getValue = () => console.log(inputValue);

  return (
    <div>
      <input value={inputValue} onChange={onInputChange} />
      <button onClick={getValue}>get value</button>
    </div>
  );

2) Uncontrollect input using useRef hook

  const inputRef = useRef("");

  const getValue = () => console.log(inputRef.current.value);

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={getValue}>get value</button>
    </div>
  );