Dynamically change YouTube video through ID in reactJS

I am new to React. Currently, I am trying to build an app that has an iframe and a text field, and a button. The text field will allow users to change videos using Youtube video ID. Here I used two dependencies, react-youtube and get-youtube-id.I have followed the usage instruction of react-youtube npm but the console is throwing an error. I have tried removing

onReady={this._onReady} this particular code, only now the iframe flashes and disappears.

enter image description here

import React, { useState } from "react";import YouTube from "react-youtube";var getYouTubeID = require("get-youtube-id");function App() {  const [id, setId] = useState("");  function handleChange(e) {    console.log(e.target.value);    setId(getYouTubeID(e.target.value));  }  const opts = {    height: "390",    width: "640",    playerVars: {      autoplay: 0    }  };  return (<div className="App bg-navy"><div className="container py-5"><div className="row">          {/*--- iFrame Column ---*/}<div className="border-5 border-info"><YouTube videoId={id} opts={opts} /></div>          {/*--- Buttons and Search Input Column ---*/}<form><div className="form-group"><input                type="text"                onChange={handleChange}                required                placeholder="Enter Video URL"              /></div><button type="submit" className="btn btn-info">              Change</button></form></div></div></div>  );}export default App;

codesandbox link