Discussion about fixing a type error in PortableText with React 17/18

Type error: 'Li' cannot be used as a JSX component.
   Its element type 'ReactElement<any, any> | Component<PortableTextComponentProps<PortableTextListItemBlock<PortableTextMarkDefinition, PortableTextSpan, string, string>>, any, any>' is not a valid JSX element.

const components: Partial<PortableTextReactComponents> = {
  block: {
    normal: ({ children }) => <p className="text-lg">{children}</p>,
    h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,
    h2: ({ children }) => <h2 className="text-2xl">{children}</h2>,
  },
  types: {
    wideartwork: ({ value }: { value: Artwork }) => {
      return (
        <Link href={`/artworks/all/${value._id}`}>
          <a>
            <NextSanityImage
              image={value.image}
              width={1900}
              height={1200}
              className="my-12 lg:my-20 max-h-[80vh] object-contain"
            />
          </a>
        </Link>
      );
    },
    splitartworks: ({
      value,
    }: {
      value: { artworkleft: Artwork; artworkright: Artwork };
    }) => {
      return (
        <div className="grid grid-cols-2 my-12 lg:my-20 gap-4 2xl:gap-12">
          <Link href={`/artworks/all/${value.artworkleft._id}`}>
            <a>
              <NextSanityImage
                image={value.artworkleft.image}
                width={950}
                height={500}
              />
            </a>
          </Link>

          <Link href={`/artworks/all/${value.artworkright._id}`}>
            <a>
              <NextSanityImage
                image={value.artworkright.image}
                width={950}
                height={500}
              />
            </a>
          </Link>
        </div>
      );
    },
  },
};

<PortableText value={project.content} components={components} />

<PortableText value={project.content} components={components} />