[React] Objects are not valid as a React child

Uncaught Error: Objects are not valid as a React child (found: [object Error]). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType

발생상황

커스텀 훅에서 발생한 error내용을 컴포넌트에서 렌더링하려고 할 때 발생

if (error) return <p>{error}</p>;

원인

커스텀 훅에서 throw로 error객체를 던져줬는데 error를 전달받은 컴포넌트가 해당 error를 객체인 상태 그대로 렌더링 하려고 해서 발생함

// 커스텀 훅
fetch(`data2/${salesOnly ? "sale_" : ""}products.json`)
  .then((res) => {
  if (!res.ok) throw Error("에러발생");
  return res.json();
})
  .then((data) => {
  setProducts(data);
})
  .catch((error) => {
  setError(error);
})
...
return [error]

// 커스텀 훅을 사용하는 컴포넌트
const [error] = useCustom();

if(error) return <p>{error}</p>;

해결

전달받은 error객체에서 message만 뽑아서 렌더링함

if (error) return <p>{error.message}</p>;