Bootstrap table not displaying properly

What is the error in my Algolia code? I’m quite new in React and Algolia.
package.json:

"react": "^16.6.3",
"algoliasearch": "^3.32.1"

The card default UI is displayed quite corrrectly, but when it comes to the table view, I get an error evidently. The compiler thinks that the whole table row is just a cell:

Here’s the code:

    import React, { Component } from "react";
    import algoliasearch from "algoliasearch/lite";
    import {
      InstantSearch,
      Highlight,
      Hits
    } from "react-instantsearch-dom";
    import PropTypes from "prop-types";
    import "./Algolia.css";
    import { Helmet } from "react-helmet";

    const searchClient = algoliasearch(
      'ZL7V6958NY',
      '6ccdb3835e97ced1dc5429d1f7c723a5'
    );

    const pageTitle = "Продавцы технической соли";

    class SaltDealers extends Component {
      render() {
        return (
          <div className="container">
            <Helmet>
              <title>{pageTitle}</title>
              <meta
                name="description"
                content={pageTitle}
              />
              <meta
                property="og:title"
                content={pageTitle}
              />
              <meta name="keywords" content="соль техническая, купить техническую соль, соль техническая +в мешках, соль техническая галит, соль техническая цена" />
            </Helmet>
            <div className="col-md-8 ml-auto mr-auto">
              <h1 className="title text-center">{pageTitle}</h1>
            </div>
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Company</th>
                  <th scope="col">Phone</th>
                  <th scope="col">Website</th>
                  <th scope="col">City</th>
                  <th scope="col">Amount</th>
                  <th scope="col">Type</th>
                </tr>
              </thead>
              <tbody>
                <InstantSearch indexName="salt_dealers" searchClient={searchClient}>
                  <Hits hitComponent={Hit} />
                </InstantSearch>
              </tbody>
            </table>       
          </div>
        );
      }
    }

    function Hit(props) {
      return (
        <tr>
          <th scope="row">
            <Highlight attribute="company" hit={props.hit} />
          </th>
          <td>
            <Highlight attribute="phone" hit={props.hit} />
          </td>
          <td>
            <Highlight attribute="website" hit={props.hit} />
          </td>
          <td>
            <Highlight attribute="city" hit={props.hit} />
          </td>
          <td>
            <Highlight attribute="amount" hit={props.hit} /> кг
          </td>
          <td>
            <Highlight attribute="type" hit={props.hit} />
          </td>
        </tr>
      );
    }

    Hit.propTypes = {
      hit: PropTypes.object.isRequired,
    };

    export default SaltDealers;

Hi @kapatsahelen,

Can you provide minimum code needed to reproduce your issue so that we can see live what might be happening?

Here is a codesandbox with boilerplate for React InstantSearch to get you started: https://codesandbox.io/s/r4jz8kkopm

Best regards,

Here’s the code reproduced: