Can you nest PortableText JSX elements via the components property in @portabletext/react?

// bodyText.ts
import linkObject from 'schemas/objects/link';
export default defineType({
  name: 'bodyText',
  title: 'Body Text',
  type: 'array',
  description: 'Enter the body text of this field note.',
  of: [
    {
      type: 'imageWithCaption',
    },
    {
      type: 'block',
     ...
    },
  ],
});

// imageWithCaption.ts
export default defineType({
  name: 'imageWithCaption',
  title: 'Image',
  type: 'image',
  options: {
    storeOriginalFilename: true,
  },
  fields: [
    {
      name: 'caption',
      title: 'Caption',
      type: 'caption',
      description: 'Enter the caption for this image.',
    },
    ...
  ],
});

// caption.ts
export default defineType({
  name: 'caption',
  title: 'Caption',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [{ title: 'Normal', value: 'normal' }],
      marks: {
        decorators: [
          { title: 'Strong', value: 'strong' },
          { title: 'Emphasis', value: 'em' },
          { title: 'Underline', value: 'underline' },
        ],
      },
      lists: [],
    },
  ],
});

const document = {
  type: 'document',
  fields: [
    {
      type: 'array',
      of: [
        // Generic portable text stuff
        { type: 'block' },
        // The custom type
        { type: 'object', fields: [
          // … which has portable text has one of its field
          { type: 'array', of: [ { type: 'block' } ] }
        ] }
      ]
    }
  ]
}

<PortableText
  value={props.value}
  components={{
    types: {
      imageWithCaption: (props) => (
        <figure>
          <img src={props.value.src} alt='' />
          <figcaption>
            <PortableText value={props.value.caption} />
          </figcaption>
        </figure>
      )
    }
  }}
/>