Error with PortableText components content prop in React/Next.js and solution to migrate to new supported way.

<PortableText
            className='mt-10'
            content={post.body}
            dataset={process.env.NEXT_PUBLIC_SANITY_DATASET}
            projectId={process.env.NEXT_PUBLIC_SANITY_PROJECT_ID}
            serializers={{
              h1: (props: any) => (
                <h1 className='text-2xl font-bold my-5'>{props}</h1>
              ),
              h2: (props: any) => (
                <h2 className='text-xl font-bold my-5'>{props}</h2>
              ),
              li: (props: any) => <li className='ml-4 list-disc'>{props}</li>,
              link: ({ href, children }: any) => (
                <a className='text-blue-500 hover:underline' href={href}>
                  {children}
                </a>
              ),
            }}
          />

 p: ({ children }: any) => <p className='font-bold my-2'>{children}</p>,

components={{
  block: {
    normal: ({children}) => <p>{children}</p>
  }
}}