Error : In the terminal of vs code no errors throwing but in chrome browser error is showing in the console

Question

enter image description here A is only ever to be used as the child of element, never rendered directly. Please wrap your in a this is showing in the console and the webpage is not showing anything

file App.js

import './App.css';
import PreNavBar from './components/PreNavBar.js'
import NavBar from './components/NavBar.js'
import Slider from './components/Slider.js'
import { BrowserRouter as Router, Route } from "react-router-dom";
import data from './data.json'
import Offers from './components/Offers'
import Heading from './components/Heading.js'
import StarProducts from './components/StarProducts.js'
import HotAccessorriesMenu from './components/HotAccessorriesMenu.js'
import HotAccessories from './components/HotAccessories.js'




function App() {
  return (
    <Router>
      <PreNavBar />
      <NavBar />
      <Slider start={data.banner.start} />
      <Offers offer={data.offer} />
      <Heading text="STAR PRODUCTS" />
      <StarProducts StarProducts={data.starProduct} />
      <Heading text="HOT ACCESSORIES" />
      <HotAccessorriesMenu />


        <Route exact path="/music">
          <HotAccessories music={data.hotAccessories.music} musicCover={data.hotAccessories.music} />
        </Route>
        <Route exact path="/smartDevice">
       <HotAccessories smartDevice={data.hotAccessories.smartDevice} smartDeviceCover={data.hotAccessoriesCover.smartDevice}  />
       </Route>





    </Router>
  );
}

export default App;