React and Ant Design Carousel

I'm trying to use antd Carousel in my react app. I’ve gone through numerous resources for ideas on how to use ant design carousel with images but I've not found any example describing not to use 'style' and other things when using antd Carousel.

I want to use <Carousel><Carousel/> in <Content><Content/> as first in my App.js file and want to do CSS separately in App.css file for Carousel.

Does anyone have any tips in general for how can I get the antd Carousel in my one page site to display some catchy images?

my code:

import React from 'react';
import "../../src/App.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import { TwitterOutlined, FacebookOutlined, YoutubeOutlined, PauseOutlined, SearchOutlined, LeftSquareOutlined, RightSquareOutlined } from '@ant-design/icons';
import { Navbar, Nav } from 'react-bootstrap';
import { Layout, Carousel, } from 'antd';

}
const { Header, Footer, Content } = Layout;
class App extends React.Component {
render() {
    return (
      <Layout>
        <Header>
        <Navbar expand="lg">
            <Navbar.Brand href="#home">
                <img src={require("../Assets/Images/hair_salon_logo1.png").default}/>
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mr-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#services">Services</Nav.Link>
                <Nav.Link href="#stylists">Stylists</Nav.Link>
                <Nav.Link href="#appointment">Appointment</Nav.Link>
                <Nav.Link href="#contact">Contact</Nav.Link>
              </Nav>
              <Nav className="ml-auto">
                <Nav.Link href="#twitter" id="twitter"><TwitterOutlined/></Nav.Link>
                <Nav.Link href="#facebook" id="facebook"><FacebookOutlined/></Nav.Link>
                <Nav.Link href="#youtube" id="youtube"><YoutubeOutlined/></Nav.Link>
                <Nav.Link href="#pause" id="pause"><PauseOutlined/></Nav.Link>
                <Nav.Link href="#search" id="search"><SearchOutlined/></Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
        </Header>
        <Content>
          function onChange(a, b, c) {
            console.log(a, b, c);
          }

          const contentStyle = {
            height: '160px',
            color: '#fff',
            lineHeight: '160px',
            textAlign: 'center',
            background: '#364d79',
          };

          ReactDOM.render(
            <Carousel afterChange={onChange}>
              <div>
                <h3 style={contentStyle}><!--image-1--></h3>
              </div>
              <div>
                <h3 style={contentStyle}><!--image-2--></h3>
              </div>
              <div>
                <h3 style={contentStyle}><!--image-3--></h3>
              </div>
              <div>
                <h3 style={contentStyle}><!--image-4--></h3>
              </div>
            </Carousel>,
            mountNode,
          );
        </Content>
        <Footer>
        </Footer>
    </Layout>
    );
  }
}
export default App;