React - how to divide components

I'm trying to use the header and sidebar from React Bootstrap and semantic UI react. But when I add those components to my page they overlap each other.

How can I divide them? The sidebar, header, and main content should be separated.

Is there a way to create layouts in react?

App.js

import { Container, Row, Col } from "react-bootstrap";
import Stack from "react-bootstrap/Stack";
import Cardtest from "./Components/Card";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import SidebarTest from "./Components/Sidebar";
import Header from "./Components/Header";

function App() {
  return (
    <div>
      <div>
        <Header />
      </div>
      <SidebarTest />
      <main>
        Main content
      </main>
    </div>
  );
}

export default App;