По какой причине мой элемент не будет отображаться?

Просматривая документацию, я попытался отобразить этот компонент элемента searchCard примерно тремя различными способами, которыми я продолжаю получать определение «searchCard», но никогда не использовал его, или в этой последней попытке React.DOM.render я получаю ошибки компиляции.

Это приложение для реагирования, которое создается в codeandbox.

Я пробовал другие методы и функции рендеринга. Такие как

 class searchCard extends Component {

 } 

 OR

 const searchCard = () => (); 

 OR

 const searchCard = props => ();

Это файл searchCard.js

import React from "react";

import "bootstrap/dist/css/bootstrap.css";
import react from "react-dom";
React.DOM.render(
  <div class = "card">
    <h5 class = "card-header">Featured</h5>
    <div class = "card-body">
      <h5 class = "card-title">Special title treatment</h5>
      <p class = "card-text">
        With supporting text below as a natural lead-in to additional content.
      </p>
      <a href = "/" class = "btn btn-primary">
        Go somewhere
      </a>
    </div>
  </div>
);

Это файл index.js

`
import React from "react";
import ReactDOM from "react-dom";
import searchCard from "./components/Toolbar/searchCard/searchCard";

function App() {
  return (
    <div className = "App">
      <Toolbar>
        <TopLinks />
        <SplashScreen />
        <Hpbg />
      </Toolbar>
      <searchCard />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

`

Ошибка типа Не удается прочитать свойство «рендеринг» неопределенного оценивать /src/components/Toolbar/searchCard/searchCard.js:4:10

`
  1 | import React from "react";
  2 | import "bootstrap/dist/css/bootstrap.css";
  3 | import react from "react-dom";
> 4 | React.DOM.render(
    |          ^
  5 |   <div class = "card">
  6 |     <h5 class = "card-header">Featured</h5>
  7 |     <div class = "card-body">
`

оценивать /src/index.js:8

`
   5 | import "./styles.css";
   6 | import Hpbg from "./components/Toolbar/Hpbg/Hpbg";
   7 | import SplashScreen from "./components/Toolbar/SplashScreen/SplashScreen";
>  8 | import searchCard from "./components/Toolbar/searchCard/searchCard";
   9 | 
  10 | function App() {
  11 |   return (
`