Data in loader RemixJs is empty in display

Question

This is simple code with my project on RemixJs. I try different method but doesn't work.

export const loader = async () => {
  return json({ name: "Ryan", date: new Date() });
}

export default function Layout() {
  const data = useLoaderData();

  return (
    <div>
      <p>{data}</p>
    </div>
  );
}

The problem, the data displayed is empty.

Do you have idea?