'React wont run more than one tag inside <div className="App">. React error #321

I have been trying to make a button using react-bootstrap. However, I cannot render it when deploying the server.

This is the App.js

import "./App.css";
import Search from "./pages/Search";
import Home from './pages/home';
import {Button} from 'react-bootstrap';
import { Routes, Route } from 'react-router-dom';



const App = () => (
    <div className="App">

    <Button>Testing Button</Button>

 
      <Search />

    </div>

)

export default App;

Note : the is a page for rendering search API.

This is the Index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  // <React.StrictMode>
    <App />,
  // </React.StrictMode>,
  document.getElementById("root")
);



The error I got



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source