App using forwardRef for FancyTextSubmit

App.jsx

function App() {
 const [text, setText] = useState("Fun");
 const fancyTextRef = useRef();
 
 const submitButton = () => {
   setText(fancyTextRef.current.value);
 };
 
 return (
   <div id="App">
     <p>Submitted Text is {text}</p>
     <FancyTextSubmit ref={fancyTextRef} onClick={submitButton} />
   </div>
 );
}
 
const FancyTextSubmit = forwardRef(({ onClick }, ref) => (
  <div>
    <input ref={ref} type="text" />
    <button onClick={onClick}>Submit</button>
  </div>
));