Alert 구성 요소를 렌더링하려고 합니다. 상위 구성 요소에서 소품이 전달되면 렌더링해야 하는데 오류가 발생합니다.

잡히지 않은 오류: 개체는 유효한 React 하위 요소가 아닙니다(발견: {message, showAlerts} 키가 있는 개체. 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요.

React가 왜 내 함수 구성요소를 객체로 취급하는지 잘 모르겠습니다. 코드 샌드박스 링크: https://codesandbox.io/s/exciting-smoke-mij6ke?file=/src/App.js:0-3054

상위 구성 요소는 다음과 같습니다.

하위 구성요소:

내가 여기서 뭘 잘못하고 있고 무엇을 바꿔야 하나요?

저는 허용된다고 생각되는 방식으로 Alerts의 하위 구성 요소를 렌더링해 보았습니다. Alert 구성 요소는 버튼을 클릭할 때 경고 상자를 렌더링하고 열어야 합니다. 경고를 닫을 때 경고를 표시하는 상위 구성 요소(showAlerts)의 상태 변수도 'false'로 변경되어야 합니다.