FormWithRef.jsx

import {  useRef } from "react";

export default function Form({ onSubmit }) {
  const inputEl = useRef(null);
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({
      input: inputEl.current.value,
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <label for="input">Input</label>
      <input ref={inputEl} id="input" />
      <button type="submit" onClick={handleSubmit} />
    </form>
  );
}

FormWithState.jsx

import {  useState } from "react";

export default function Form({ onSubmit }) {
  const [state,setState]= useState({input: ''});
  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(state);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label for="input">Input</label>
      <input value={state.input} onChange={(e)=> setState({...state,input:e.target.value})} id="input" />
      <button type="submit" onClick={handleSubmit} />
    </form>
  );
}