Error with useLoaderData() hook when fetching data for blog posts

TypeError: Cannot destructure property 'posts' of '(0 , import_react27.useLoaderData)(...)' as it is undefined.

import { useLoaderData } from "@remix-run/react";
import { Link } from "@remix-run/react";
import moment from "moment";
import { getClient } from "~/lib/sanity/getClient";
import { urlFor } from "~/lib/sanity/sanity";

// loader() must be async!
export async function loader() {
  const posts = await getClient().fetch(
    `*[_type == "post"]{ 
      _id, 
      title, 
      slug, 
      author,
      "authorName": author->name,
      "authorImage": author->image,
      mainImage, 
      publishedAt, 
      categories,
      excerpt, 
      myTags, 
      featuredPost,
      "categoryName": *[_type == 'category' && _id in ^.categories[]._ref]{title, slug},
    } | order(publishedAt desc) `
  );

  return { posts };
}

export default function LatestBlogPosts() {
  let { posts } = useLoaderData();

return (
    <section className="">
      <div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
        <div className="absolute inset-0">
          <div className="h-1/3 sm:h-2/3" />
        </div>
        <div className="relative mx-auto">
          <div className="text-left">
            <h2 className="text-7xl tracking-tight font-black text-richBlack">
              ALL POSTS
            </h2>
          </div>
          <div className="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
            {posts?.length > 1
              ? posts.slice(0, 12).map((post: any) => (

TypeError: Cannot destructure property 'posts' of '(0 , import_react27.useLoaderData)(...)' as it is undefined.

import { useLoaderData } from "@remix-run/react";
import { Link } from "@remix-run/react";
import moment from "moment";
import NavbarIndex from "~/components/navigation-index";
import { CgArrowLongLeft, CgArrowLongRight } from "react-icons/cg";

import { getClient } from "~/lib/sanity/getClient";

import { urlFor } from "~/lib/sanity/sanity";
import { ReactChild, ReactFragment, ReactPortal } from "react";

// loader() must be async!
export async function loader() {
  const posts = await getClient().fetch(
    `*[_type == "post"]{ 
      _id, 
      title, 
      slug, 
      author,
      "authorName": author->name,
      "authorImage": author->image,
      mainImage, 
      publishedAt, 
      categories,
      excerpt, 
      myTags, 
      featuredPost,
      "categoryName": *[_type == 'category' && _id in ^.categories[]._ref]{title, slug},
    } | order(publishedAt desc) `
  );

  return { posts };
}

export default function BlogIndex() {
  let { posts } = useLoaderData();
  const dateFormatter = new Intl.DateTimeFormat("en-GB");

  return (
    <main className="">
      <NavbarIndex />
      <div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
        <div className="absolute inset-0">
          <div className="h-1/3 sm:h-2/3" />
        </div>
        <div className="relative mx-auto">
          <div className="text-left">
            <h2 className="text-7xl tracking-tight font-black text-richBlack">
              ALL POSTS
            </h2>
          </div>
          <div className="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
            {posts?.length > 1
              ? posts.slice(0, 12).map((post: any) => (

);
 console.log(posts)
  return { posts };
}