How to implement nested list using @portabletext/react npm in nextjs with sanity.io

Question

i get stuck when wanna implement nested list using @portabletext/react package in nextjs, i need to show my list (in this case using bullet list) in different condition. In the normal condition to be the first picture. and then in the other condition to be second picture. And for my code of the Rich Text component on the following bellow

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.stack.imgur.com/6N5VI.png)```
[Second Picture (other condition)](https://i.stack.imgur.com/10SVB.png)


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