The props values occasionally fail to be stored in the state when passed to the subcomponent

Question

export default function multiPage() {
  useEffect(() => {
    if (query.nickname == undefined) return;
    let nickname1 = query.nickname?.split(" ")[0]
    let nickname2 = query.nickname?.split(" ")[1]
      query.data = [];
      axios.get(url + `/armories/characters/${nickname1}`, {
        headers: {
          Authorization: API_KEY,
        },
      }).then((response) => {
        query.data.push(response.data);
      })
      axios.get(url + `/armories/characters/${nickname2}`, {
        headers: {
          Authorization: API_KEY,
        },
      }).then((response) => {
        query.data.push(response.data);
        setLoading(false);
      })
    

  }, [query.nickname])
  return (
    <>
      {

        loading && !nicknameError ? "loading now" : <MultiProfilePage query={query.data} />
      }
      
    </>
  )

}

• pages/multi/[nickname]

import { useEffect, useState } from "react";
export default function MultiProfilePage(props) {
  const [data, setData] = useState([]);
  console.log(props.query);
  useEffect(() => {
    if (props.query && props.query.length > 0 && !data.length) {
      setData([props.query[0]?.ArmoryProfile, props.query[1]?.ArmoryProfile]); // Error, ArmoryProfile is not find
    }
    console.log("Hello :)");
    console.log(data);
  }, [props.query, data])
  return (
    data.length ? 
    <div className="flex justify-between w-[1400px] font-PretendardRegular">
      <div className="flex flex-col">
        {
          data.map((item, idx) => (
            {load user profile area}
          ))
        }
      </div>
    </div> : <div>loading now</div>
  )
}

• src/components/MultiProfile.js

The props values occasionally fail to be stored in the state when passed to the subcomponent. However, there is something odd. After refreshing the page about four times, at least once, the values are definitely not being passed to the state, resulting in an error saying 'Cannot read ArmoryProfile.' Strangely, when checking props.query with the console.log method in the code, there is a value, but despite that, the value is not being passed to the data state. When it operates normally, both props.query and the data state receive values. The props data used on this page is obtained in index.js through a method of fetching new data when query.data is not available (moving to else from if query.data).

I do not want the state's value to occasionally fail to update, even though the query.data received through props is correct. I want the state to update regardless of the outcome, and I want the profile data to be displayed correctly. I've tried modifying the array part of the useEffect or various parts of index.js to achieve this result, but it hasn't improved the situation.

add data from useEffect array, spread operator in setData, .... i don't know solution this problem. help me