如何使用react类组件创建algolia自动完成自定义渲染器

import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { autocomplete, AutocompleteCore } from '@algolia/autocomplete-js';

class CustomAutocomplete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hits: [],
    };
    this.core = new AutocompleteCore({
      appId: 'YOUR_APP_ID',
      apiKey: 'YOUR_API_KEY',
      indexName: 'YOUR_INDEX_NAME',
    });
  }

  componentDidMount() {
    autocomplete({
      container: this.container,
      debug: true,
      placeholder: 'Search for products...',
      autoselect: true,
      core: this.core,
      templates: {
        item({ suggestion, html }) {
          return `<div class="item">${suggestion.name}</div>`;
        },
      },
      onStateChange: ({ state, setQuery }) => {
        this.core.setQuery(state.query).then(() => {
          setQuery(state.query, { shouldRefocus: true });
        });
        this.core.search().then(({ hits }) => {
          this.setState({ hits });
        });
      },
    });
  }

  render() {
    return (
      <div ref={(c) => (this.container = c)}>
        <input type="text" />
        <div className="autocomplete-results">
          {this.state.hits.map((hit) => (
            <div key={hit.objectID} className="item">
              {hit.name}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default CustomAutocomplete;