useStates 's setState not setting value while in function handleNew and i have to

SearchBar component(that contains input type text that takes input from user) returns search query from a user which I am able to pass into app.js but I have to make the event twice that is pressing enter twice to make API to get data but then I am not able to even set the value of "video"

import React from "react";
import { Grid } from "@material-ui/core";
import "./App.css";
import { useState, useEffect } from "react";

import youtube from "./api/youtube";
// import SearchBar from "./components/SearchBar";
// import VideoDetail from "./components/VideoDetail";

import { SearchBar, VideoDetail, Video } from "./components/index";
import VideoList from "./components/VideoList";

const App = () => {
  const [video, setVideo] = useState([]);
  const [selectedVideo, setselectedVideo] = useState(null);

"value" is the input from user

  const handleNew = async (value) => {
    console.log("hello", value);

    const {
      data: { items: videoz },
    } = await youtube.get("search", {
      params: {
        part: "snippet",
        maxResults: 6,
        key: [API_KEY],
        q: value,
      },
    });
    const lists = [videoz[0]];
    console.log(videoz);
    setselectedVideo(videoz[0]);
    console.log(selectedVideo);
  };

  return (
    <div class="container">
      <nav>
        <SearchBar onChange={handleChange} />
      </nav>
      <main>
        <VideoDetail video={selectedVideo} />
      </main>
      <div id="sidebar">Sidebar</div>
    </div>
    // <div className="wrapper">
    //   <SearchBar
    //     className="search-bar"
    //     // onFormSubmit={handleNew}
    //     // value={query}
    //     onChange={handleChange}
    //   />
    //   <div className="wrapped">
    //     <VideoDetail className="videozzz" video={selectedVideo} />
    //     <VideoList className="" />
    //   </div>
    // </div>
  );
};

export default App;
// function random_bg_color() {
//   var x = Math.floor(Math.random() * 256);
//   var y = Math.floor(Math.random() * 256);
//   var z = Math.floor(Math.random() * 256);
//   var bgColor = "rgb(" + x + "," + y + "," + z + ")";
//   console.log(bgColor);
//   document.body.style.backgroundImage =
//     "url("https://image.tmdb.org/t/p/original//86L8wqGMDbwURPni2t7FQ0nDjsH.jpg")";
//   document.body.style.background.url = bgColor;
// }

// random_bg_color();