Issue with custom preview component not showing in search results view

import { CgBox as ByCatIcon } from 'react-icons/cg';
import S from '@sanity/desk-tool/structure-builder';
import WordPreview from '../cpt/WordPreview';


export default () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('Words by category')
        .icon(ByCatIcon)
        .child(
          // List out the categories
          S.documentTypeList('category')
            .title('Words by category')
            // When a category is selected, pass its id down to the next pane
            .child((categoryId) =>
              // load a new document list
              S.documentList()
                .title('Words')
                // Use a GROQ filter to get documents.
                // This filter checks for sampleProjects that has the
                // categoryId in its array of references
                .filter('_type == "word" && $categoryId == category._ref')
                .params({ categoryId })
            )
        ),
      S.divider(),
      S.listItem()
        .title('All words')
        .schemaType('word')
        // When you open this list item, list out the documents
        // of the type category"
        .child(S.documentTypeList('word').title('Words')),
      S.listItem()
        .title('Categories')
        .schemaType('category')
        .child(S.documentTypeList('category').title('Categories')),
    ]);

export const getDefaultDocumentNode = ({ schemaType }) => {
  // Conditionally return a different configuration based on the schema type
  if (schemaType === 'word') {
    return S.document().views([
      S.view.component(WordPreview).title('Display'),
      S.view.form(),
    ]);
  }
};