React child component doesn't render html

Using React 16, trying to create a child component (a simple one) and for some reason, the inner html does not render, but the component tag does when view with dev tools.

My component code is like:

import React, { Component } from "react";
import {Container, Jumbotron, Button, Col, Row } from 'reactstrap';
import './jumbo.css';
import './index.css';


    class custHero extends Component {
      render() {
        return (
          <div>
            <Jumbotron className="generalView">
              <h1 className="display-3">Customer and Partner Development</h1>
              <p className="lead">Stay connected with your customers with Moneyball and Immerse</p>
            </Jumbotron>
          </div>
        );
      }
    }

    export default custHero;

I bring it into the other view/component like:

import custHero from './jumboCustomer';

then, where I want child component to render:

<custHero/>

It should simply render the component contents within the child div. What am I missing here for something like this?

The entire component I am trying to bring this child component into:

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import {
  Container,
    Jumbotron, Button, Form, FormGroup, Label, Input, FormText, Tooltip, Col, Row, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import DatePicker from 'react-date-picker';
import Users from "./Users";
import './index.css';
import './ConnCust.css';
import custHere from 'jumboCustomer'

class ConnCustIm extends Component {

    state = {
        date: new Date(),
    }

    onChange = Date => this.setState({ Date })

  render() {
    return (
      <div>
        <Breadcrumb className="custBread" tag="nav">
            <BreadcrumbItem className="custBread" tag="a" href="#">Home</BreadcrumbItem>
            <BreadcrumbItem className="custBread" active>Connect with Customers</BreadcrumbItem>
        </Breadcrumb>
        <custHero />
        <Container fluid="true">
            <Form className="cenForm">
                <FormGroup>
                    <Label for="custName" className="inputHead">* Company Name</Label>
                    <Input type="textarea" name="custName" id="custName" placeholder="enter the name of the company you want to visit" />
                </FormGroup>
                <FormGroup>
                    <Label for="custTech" className="inputHead">* Technology</Label>
                    <Input type="text" name="custTech" id="custTech" placeholder="enter the technologies you want to see in action: OMS, Azure Stack, IoT" />
                </FormGroup>
                <FormGroup>
                    <Label for="custPurpose" className="inputHead">* Purpose</Label>
                    <Input type="textarea" name="custPurpose" id="custPurpose" placeholder="tell us what you want to see or learn" />
                </FormGroup>
                <FormGroup>
                    <Label for="custLocale" className="inputHead">Company Location</Label>
                    <Input type="text" name="custLocale" id="custLocale" placeholder="street address or city/state/country" />
                </FormGroup>
                <FormGroup>
                    <Label for="coNeed" className="inputHead">Companies</Label>
                    <Input type="text" name="coNeed" id="coNeed" placeholder="Boeing, Ford, General Electric" />
                </FormGroup>
                <FormGroup>
                    <Label for="coNeed" className="inputHead">Start Date for Visit</Label>
                    <DatePicker
                        onChange={this.onChange}
                        value={this.state.date}
                    />
                </FormGroup>
                <FormGroup tag="fieldset">
                <Label className="inputHead">Do you want customer onsite or remotely?</Label>
                    <FormGroup check>
                        <Label className="custList" check>
                            <Input type="checkbox" name="custVisitType" />
                            Onsite
                        </Label>
                    </FormGroup>
                    <FormGroup check>
                        <Label className="custList" check>
                            <Input type="checkbox" name="custVisitType" />
                            Remotely
                        </Label>
                    </FormGroup>
                </FormGroup>
                <FormGroup>
                    <Label for="custComments" className="inputHead">Comments</Label>
                    <Input type="textarea" name="custComments" id="custComments" placeholder="anything else do you want to tell us" />
                </FormGroup>
                <FormGroup>
                    <Button id="submitButton"><NavLink to="/ConfirmIm">Submit</NavLink></Button>
                </FormGroup>
            </Form>
        </Container>
      </div>
    );
  }
}

export default ConnCustIm;

Thanks much.

EDIT:

changed child to the following, and it works fine.

import React, { Component } from "react";
import {
  Container, Jumbotron, Button, Col, Row } from 'reactstrap';
import './jumbo.css';
import './index.css';

export const CustHero = () =>
  <Jumbotron className="customerView">
    <h1 className="display-3">Customer and Partner Development test</h1>
    <p className="lead">Stay connected with your customers with Moneyball and Immerse</p>
  </Jumbotron>