Can't get components displayed with react-scroll navigation - reactjs

Question

I'm using react-scroll to navigate to different sections on the same page. I've been following a tutorial and everything works but I have dummy text in each section and now I don't know how to change the content to my components. Basically I have three components and I want one to be displayed in each section of my web page but I can't get it working.
I don't want title, subtitle, dark etc in each section. Instead I want to just put my whole component in that section.
Can someone show me how I would put one of my components in each section (there are three components and three sections)? Is this possible or do I have to re-structure my website so that the content is separated in to different parts like shown in section.js?
Important: The part which I don't understand is how to link up my content in Section.js:
Section.js
import React from "react";
export default function Section({ title, subtitle, dark, id }) {
return (
<div className={"section" + (dark ? " section-dark" : "")}>
<div className="section-content" id={id}>
<h1>{title}</h1>
<p>{subtitle}</p>
</div>
</div>
);
}
App.js
class App extends Component {
render() {
return (
<div className="App">
<Navbar />
<Section
title="section1"
subtitle={dummyText}
id="section1"
/>
<Section
title="section2"
subtitle={dummyText}
dark={false}
id="section2"
/>
<Section
title="section3"
subtitle={dummyText}
dark={true}
id="section3"
/>
</div>
Navbar.js
<nav className="nav" id="navbar">
<div className="nav-content">
<button
className="nav-logo"
alt="Logo"
onClick={this.scrollToTop}
>Top</button>
<ul className="nav-items">
<li className="nav-item">
<Link
activeClass="active"
to="section1"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
About
</Link>
</li>

Answer 1

Do you need to pass a component to your Section Component instead of these params?
{ title, subtitle, dark, id }
if this is a case, you can use children
export default function Section({ children }) {
return (
<div>
{children}
</div>
);
}
then you can put your component here:
<div className="App">
<Section>
// your component
</Section>
</div>