Javascript – Encountering an issue while attempting to fetch data from an API

Here i am trying get a data from the url using axios. I am getting a data when i console log response.data
this is the log i get but when i try console log response.data.trees then it shows undefined. How can i solve this issue.

Fetch1 {
  "trees": [
    {
      "id": 1,
      "name": "Baobab",
      "species_name": "Adansonia",
      "image": {
        "src": "https://upload.wikimedia.org/wikipedia/commons/3/36/Baobab_Adansonia_digitata.jpg",
        "alt": "A large African baobab tree with bright green leaves against a soft blue sky."
       }
    },
    {
      "id": 2,
      "name": "Red Mangrove",
      "species_name": "Rhizophora mangle",
      "image": {
        "src": "https://upload.wikimedia.org/wikipedia/en/1/16/Red_mangrove-everglades_natl_park.jpg",
        "alt": "A free-standing red mangrove tree growing in shallow water in the backcountry of the Cape Sable area of Everglades National Park.",
      }
    }
  ]
}

Fetch2 undefined

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('url');
        setTrees(response.data.trees);
        console.log('Fetch1',response.data)
        console.log('Fetch2',response.data.trees)
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);