Button not rendering in React.js

I am trying to render a Button in React.js that would pop up a modal which reads "Submit Comment". However, the page turns up blank when i add the CommentForm component inside the RenderComments function. It works fine when I add a HTML component like "p" but doesnt work for CommentForm and "Button". Please help. I'm new to React.

   import React, {Component} from "react";
   import { Link } from "react-router-dom";
   import { Modal, ModalHeader, ModalBody } from "bootstrap-react";
   import { Button } from  'react';
   import { Card, CardImg, CardText, CardBody, CardTitle, Breadcrumb, 
   BreadcrumbItem } from "reactstrap";

   class CommentForm extends Component {

    constructor(props) {
    super(props);

    this.toggleModal = this.toggleModal.bind(this);

    this.state = {
        isModalOpen: false
    };

    
    
}

toggleModal() {
    this.setState({
        isModalOpen: !this.state.isModalOpen
    })
}

handleSubmitComment(values) {

}

render() {
    return (
         <div>
            <Button outline onClick={this.toggleModal}>
                <span className="fa fa-pen fa-lg">Submit Comment</span>
            </Button>

            <Modal isOpen={this.state.isModalOpen}  toggle={this.toggleModal}>
                <ModalHeader toggle={this.toggleModal}>Submit Comment</ModalHeader>
                <ModalBody>

                </ModalBody>
            </Modal>
         </div>
    );
}

  }


    function RenderDish({dish}) {

 if (dish != null) {
    return (
        <div className='col-12 col-md-5 m-1'>
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle> {dish.name}</CardTitle>
                    <CardText> {dish.description} </CardText>
                </CardBody>
            </Card>
        </div>   
    );
}
else {
    return (
        <div></div>
    );
}
    }

    



    function RenderComments({comments}){
if (comments != null) 
    return (
        <div className='col-12 col-md-5 m-1'>
            <h4> Comments </h4>
            <ul className='list-unstyled'>
                {comments.map(comment => {
                    return (
                        <li key={comment.id}>
                        <p>{comment.comment}</p>
                        <p>-- {comment.author},
                        &nbsp;
                        {new Intl.DateTimeFormat('en-US', {
                            year: 'numeric',
                            month: 'long',
                            day: '2-digit'
                        }).format(new Date(comment.date))}
                        </p>
                        </li>
                    );
                })}
            </ul>
            <CommentForm />
        </div>
    );
    else
        return ( <div></div>);
    }


    const DishDetail = (props) => {

console.log('DishDetail Component render is invoked')

console.log(props.dish);
console.log(props.comments);

if (props.dish != null) 
    return (
        <div className="container">
            <div className='row'>
                <Breadcrumb>
                    <BreadcrumbItem><Link to='/menu'>Menu</Link></BreadcrumbItem>
                    <BreadcrumbItem active>{props.dish.name}</BreadcrumbItem>
                </Breadcrumb>
                <div className="col-12">
                    <h3>{props.dish.name}</h3>
                    <hr />
                </div>
            </div>
            <div className="row">
                <RenderDish dish={props.dish} />
                <RenderComments comments={props.comments} />
            </div>
        </div>
    );      
else
    return(
        <div></div>
    );
    }



    export default DishDetail;