PortableTextInput in a custom component

[iamdangavin]

Trying to find any documentation or help in regard to using a PortableTextInput rather than a TextArea field within a custom component. Example:

import React, { useState } from "react";
import { Stack } from "@sanity/ui";
import { useClient, set, unset, PatchEvent, PortableTextInput } from "sanity";

const FileTranscriber = React.forwardRef((props, ref) => {
  const { elementProps, type, value, onChange } = props;
  const client = useClient();
  return (
    <Stack space={3}>
      {props.renderDefault(props)}
      <PortableTextInput />
    </Stack>
  )
})

[iamdangavin]

Disregard, it appears if you are using the PortableTextInput within another schema type you need to do the following:

<PortableTextInput
  schemaType={{
    type: "array",
    of: [{ type: "block" }],
  }}
/>

[iamdangavin]

While that does work and renders a field it requires the {...props} passed to it which then in turn produces this error after you start typing TypeError: JSON.stringify cannot serialize cyclic structures. so I am back to square one.

Additional context:
I want to have a file field that has a custom component with a Button + PortableTextInput. The button triggers an api call to transcribe the audio file and then pass that into the PortableTextInput. That would allow the admin/editor to edit the transcription.