How to use a custom preview component on the document view?

export const structure = (S) =>
  S.list()
    .title('Content')
    .items([
      S.documentTypeListItem('myDocumentType').child(
        S.documentList()
          .title('My Documents')
          .filter('_type == "myDocumentType"')
          .child((documentId) =>
            S.document()
              .documentId(documentId)
              .schemaType('myDocumentType')
              .views([
                S.view.form(), // Default form view
                S.view.component(CustomPreviewComponent)
                  .title('Preview')
                  .icon(EyeIcon) // optional
              ])
          )
      )
    ])

import { useDocumentPane } from 'sanity/desk'

function CustomPreviewComponent(props) {
  const { document, documentId, schemaType } = props
  
  // Access the current document values
  const { displayed } = document
  
  return (
    <div style={{ padding: '1rem' }}>
      <h2>{displayed?.title}</h2>
      {/* Render your custom preview here */}
    </div>
  )
}

export default CustomPreviewComponent