reactjs – How to get data from Array inside Object in React js

i have the following json from node js api

{
    "infos": [
        {
            "id": 3,
            "number": "24",
            "name": "jone",
        }
    ],
    "photo": [
        {
            "id": 56,
            "image": "",
            "imgid": 3
        },
        {
            "id": 57,
            "image": "",
            "imgid": 3
        }
    ]
}

iam getting the data by id .
i saw my data in console browser
but when i want to display it i get the following error

"TypeError: Cannot read properties of undefined (reading '0')"

that is my code in react js

 const {state}  = useLocation();
 const [data, setData] = useState([])

    const getdata =async() => {
       await getbyid(state)
          .then(response => {
            setData(response.data);
            console.log(response.data);
          })
          .catch(e => {
            console.log(e);
          });
      };

    useEffect( ()=>  {
        getdata()
        console.log(getdata());
    }, [])

  return (
    <div>
        <h1>{data.infos[0]["name"]}</h1>
    </div>
  )