When I click on the search button I send a POST request and get data from the server.
The thing is the first time it returns an empty array based on my console log report, but when I click on the button for the second time it has the values from the server and my UI changes. Why does this happen? is it because async-await process? what should I do to solve this problem?

```
export default function Home() {
  const [searchTerm, setSearchTerm] = useState('');
  const obj = { searchTerm };
  const [receivedData, setReceivedData] = useState([]);
  const [episList, setEpisList] = useState([]);
  const [isPlaying, setIsPlaying] = useState(true);
  const [currentUrlIndex, setCurrentUrlIndex] = useState(0);

  const options = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(obj),
  };

  const submitSearch = async () => {
    const response = await fetch('http://localhost:3001/', options);
    const data = await response.json();

    //COMMENT--- Manipulating and using the result I get from server
    setReceivedData(data.body.result);

    const epName = receivedData.map((x) => {
      return x.name;
    });

    setEpisList(epName);
    console.log(epName);
  };

  return (
    <>
      <main>
           <div>
                <ReactPlayer
                  controls={true}
                  url={`videos/${episList[currentUrlIndex]}.mkv`}
                />
              </div>
            )}
          </div>
        </div>
        <div>
          <SearchBox
            value={searchTerm}
            onChange={(e) => {
              setSearchTerm(e.target.value);
            }}
          />
          <SearchButton onClick={submitSearch} />
        </div>
      </main>
    </>
  );
}

```