외부 json 질문드립니다.

먼저, 리액트 프로젝트를 어느정도 마무리하고, 매번 바뀔떄마다 빌드하는게 귀찮아서
json데이터로 만들어서 홈페이지 접속시 useEffect 에서 한번 ajax로 데이터를 받아서, props로 데이터를 각페이지에 전달하려고 하였습니다.
[app.js 에서 <Main01> 모달로 props를 전달 ]

app.js에서 아래와 같이 코드를 짜서  data2에 json값을 넣어주었습니다.

const [data2, setData] = useState([]);
const url = "http://~~~~~~";useEffect(() => {
  async function getData() {
    try {
      const data = await axios.get(url);
      setData(data.data);
    } catch (error) {
      setData('실패');
    }
  }
  getData();
}, []);

그후
APP.js 내의 <Main01 />로 전달하였는데

<Main01 데이터={data2} />
main01에서 props.데이터로 내용을 가져와서 HTML에 뿌려주면
에러가나서 화면이 안보여 확인해보니

의에 이미지 처럼 맨처음엔 빈 배열값이
두번쨰로는 값이 들어온 배열값이 (main03으로 되어있는 저부분입니다.)
들어옵니다.

Main01에서는 props.데이터가 정상적으로 들어왔을떄 
Main01에 뿌려줘야하는데 그게 아니여서 오류가 나는거 같은데, 어떻게 설정해야할지를 잘모르겠습니다.

외부json을 axios로 받아와 페이지 마다 뿌리는 방식이 잘못된걸까요?
그게아니면 어떻게 수정해야 <Main01>에서 정상적으로 데이터를 가져올수있을까요?