useLoaderData() Type 이슈

// pages.router.tsx
import { createBrowserRouter } from 'react-router-dom';
const MainHeader = React.lazy(() => import('../main.header')); // import main.header.tsx

export const router = createBrowserRouter([
	{
		path: '/',
		element: <Home />,
		loader: () => <MainHeader />
	}
]);

// Home.tsx
import { useLoaderData } from 'react-router-dom';

// 정상 작동
function Home() {
	const header = useLoaderData(); // header: unknown 타입
	// 빈 태그 <></>의 안에서는 header 가 unknown 타입인 것과 상관없이 정상 작동	
	return <>
		{header}
		home page
	</>
}

// 에러 발생
function Home() {
	// JSX 태그의 child로는 ReactNode 타입이 와야하는데 userLoaderData의 리턴타입이 unknown
	const header = useLoaderData();
	return <div>
		{header}
	</div>
}

에러 스크린샷