`object’ is undefined due to async function that fetched data in useEffect hook in reactjs

I am fetching an object from api using axios.get("url"). The object fetched successfully (in Animal state) but there is a component level state (imageState) which requires updation using setState with fetched data.

import React,{useEffect, useState} from 'react'
import axios from 'axios'
const AnimalDetail = ({match}) => {
    const [Animal ,setAnimal ] = useState({})
    const Id = parseInt(match.params.id)
    const [imageState, setImageState] = useState ("");
            const fetchAnimal = async () => {
                const {data} = await axios.get(`/api/animals/${Id}`)
            // setImageState(Animal.image[0])   // need to access first index of image object


   setImageState(Object.values(Animal.image)[0])  // error cant convert undefined to object
    return (
       <h2>imageState </h2>  //undefined
        <h2>{typeof(Animal.image)}</h2>  //gives object
export default AnimalDetail

Backend Api :


How can i fetch the data and update the component level state periodically(after fetching)?


You can try following, maybe this can help you. Removed the second useEffect and updated the image state in the first useEffect.

And also I can see, you have declared const [imageState, setImageState] = useState (""); twice. You can remove the second one.

Also, make sure you handle the API error in useEffect otherwise this may break the application on API failure.

import React, { useEffect, useState } from 'react';
import axios from 'axios';
const AnimalDetail = ({ match }) => {
  const [Animal, setAnimal] = useState({});
  const Id = parseInt(match.params.id);
  const [imageState, setImageState] = useState('');

  useEffect(() => {
    const fetchAnimal = async () => {
      const { data } = await axios.get(`/api/animals/${Id}`);
    if (Id) {
  }, [Id]);

  return (
      <h2>imageState </h2> //undefined
      <h2>{typeof Animal.image}</h2> //gives object
export default AnimalDetail;