Custom search component is being rendered twice

[nickscamara]

Hi there,

I am having the following weird bug:

In theme.config.tsx, when attempting to render a custom search component below, it appears twice on the page. This duplication can be noticed upon pressing the command shortcut key (CMD K) and is also evident from duplicate network requests.

Any ideas on what could be happening? Thanks!

import React from 'react'
import { DocsThemeConfig } from 'nextra-theme-docs'
import { MendableSearchBar } from '@mendable/search'

const config: DocsThemeConfig = {
  logo: <span>My Project</span>,
  project: {
    link: 'https://github.com/shuding/nextra-docs-template',
  },
  chat: {
    link: 'https://discord.com',
  },
  docsRepositoryBase: 'https://github.com/shuding/nextra-docs-template',
  footer: {
    text: 'Nextra Docs Template',
  },
  search: {component:<div><MendableSearchBar anon_key="" showSimpleSearch /></div>},

}

export default config

[dimaMachina]

please provide reproduction repo

[nickscamara]

@dimaMachina here it is: https://github.com/mendableai/nextra-test

It is just a fork of the template, with the mendable component added. Thank you.

[dimaMachina]

you need to pass className prop to search container element like

component: (props) => <div {...props}><MendableSearchBar anon_key="" showSimpleSearch /></div>