Issue using a custom preview component with code-input

[ejmudrak]

Describe the bug
When inserting code-input blocks into rich text, specifying any ObjectComponents elements for the components property of a field causes the code-input's form inputs to change to a less usable state. The language select becomes a text box, and the code text editor loses syntax highlighting and other options. Perhaps supplying anything for components is overwriting the default functionality?

To Reproduce

Try adding the components property below to a field with type: 'code'.

export default [
  {
    type: 'block',
    of: [
      defineArrayMember({
        type: 'code',
        name: 'code',
        title: 'Code',
        icon: CodeIcon,
        components: {
          preview: () => (
            <div style={{fontSize: '12px', display: 'flex', alignItems: 'center', padding: '3px'}}>
              <CodeIcon />
              <span style={{marginLeft: '5px'}}>Code Snippet</span>
            </div>
          ),
        },
      }),
    ],
  },
]

The custom preview component looks like this, see the <> Code Snippet here:

Expected behavior

What I'm trying to accomplish is to customize the preview component for a code-input, so that the actual code doesn't render in the editor -- this is because the default code-input preview overlaps with other text when adding it inline.

Screenshots

The expected behavior of code-input:

The issue behavior of code-input, when the components property is given:

What the current code-input preview looks like, without trying to customize it:

Which versions of Sanity are you using?

@sanity/cli (global) 3.23.4 (latest: 3.26.0)

What operating system are you using?

MacOS Sonoma 14.1.1

Which versions of Node.js / npm are you running?

Node 17

npm 8.18.0, Node 17.0