The data I want to get from API using Axios returns undefined

Question

Recently I got into React and while I was practicing I had this problem. I want to take the information from the API then see it on the console but it returns undefined. I think I made a mistake with axios but I can't see it.

import axios from "axios";
import { useState } from "react";
import "./App.css";

function App() {
  const [place, setPlace] = useState("new york");
  const [placeInfo, setPlaceInfo] = useState({});

  const handleFetch = () => {
    const { data } = axios.get(
      `https://api.weatherapi.com/v1/forecast.json?key=931f75d818c34b51aca143737222202&q=${place}&days=1&aqi=no&alerts=no`
    );

    console.log(data);
  };

  return (
    <div className="App">
      <input
        type="text"
        value={place}
        onChange={(e) => {
          setPlace(e.target.value);
        }}
      ></input>
      <button onClick={handleFetch}>Search</button>
    </div>
  );
}

export default App;