reactjs - Hvordan man implementerer en indlejret liste ved hjælp af @portabletext/react npm i nextjs med sanity.io

jeg sidder fast, når jeg vil implementere en indlejret liste ved hjælp af @portabletext/react-pakken i nextjs, jeg skal vise min liste (i dette tilfælde ved brug af punktliste) under forskellige betingelser. I den normale tilstand skal det være første billede. og så i den anden tilstand skal det være andet billede. Og for min kode til Rich Text-komponenten er nedenfor

import Image from 'next/image';
import urlFor from '../lib/urlFor';
import Link from 'next/link';
import { PortableTextReactComponents } from '@portabletext/react';
import CodeBlock from './CodeBlock';

export const RichText: Partial<PortableTextReactComponents> = {
  types: {
    image: ({ value }: any) => {
      console.log(value.caption);
      return (
        <div>
          <section className="relative h-[25rem]">
            <Image
              src={urlFor(value).url()}
              fill
              alt="hero"
              className="rounded-md"
            />
          </section>
          <section className="flex flex-col items-center">
            <p className="tracking-[0.005em] text-sm text-[#9fa2aa] pt-4">
              {value.caption}
            </p>
          </section>
        </div>
      );
    },
    code: ({ _, value: { code, language } }: any) => (
      <CodeBlock language={language} code={code} />
    ),
  },
  list: {
    bullet: ({ children }: any) => (
      <ul className="my-5 ml-10 list-disc tracking-[0.005em] text-base text-[#333a4a]">
        {children}
      </ul>
    ),
    number: ({ children }: any) => (
      <ol className="my-5 ml-10 list-decimal tracking-[0.005em] text-base text-[#333a4a]">
        {children}
      </ol>
    ),
  },
  block: {
    normal: ({ children }: any) => (
      <p className="my-5 tracking-[0.005em] text-base text-[#333a4a] leading-7">
        {children}
      </p>
    ),
    h1: ({ children }: any) => (
      <h1 className="my-5 text-5xl font-semibold text-fs-black">{children}</h1>
    ),
    h2: ({ children }: any) => (
      <h2 className="mt-10 mb-5 text-4xl font-medium text-fs-black">
        {children}
      </h2>
    ),
    h3: ({ children }: any) => (
      <h3 className="mt-14 mb-5 text-3xl font-medium pb-2 border-b-[1px] border-b-[#E6E6E6] text-fs-black">
        {children}
      </h3>
    ),
    h4: ({ children }: any) => (
      <h4 className="mt-14 mb-5 text-2xl font-medium pb-2 border-b-[1px] border-b-[#E6E6E6] text-fs-black">
        {children}
      </h4>
    ),
    h5: ({ children }: any) => (
      <h4 className="mt-10 text-xl font-medium text-fs-black">{children}</h4>
    ),
    blockquote: ({ children }: any) => (
      <blockquote className="py-5 pl-5 my-5 border-l-4 border-l-primary tracking-[0.005em] text-base text-fs-black">
        {children}
      </blockquote>
    ),
  },
  marks: {
    link: ({ children, value }: any) => {
      const rel = !value.href.startsWith('/')
        ? 'noreferrer noopener'
        : undefined;
      return (
        <Link href={value} rel={rel}>
          {children}
        </Link>
      );
    },
  },
};
[Fist Picture (in the normal condition)](https://i.sstatic.net/6N5VI.png)```
[Second Picture (other condition)](https://i.sstatic.net/10SVB.png)


How i can implement nested list with @portabletext/react?