React.Children.only error expected to receive one React child

Not really sure what went wrong in my application. I am using create-react-app and I am trying to display all my components in the corresponding root div. The problem is that I can display all the components on the page except for the very last, the Score component. I even tried to throw this component into a div and I still get the following problem:

'React.Children.only is expected to receive one React child.

What exactly does this mean?

Here is my App.js structure.

render() {
   return (
       <div className="App">
           <div className="App-header">
              <h2>BAO BAO BAO</h2>
           </div>
           {this.state.result ? this.renderResult() : this.renderTest()}
           <Baoquestion />
           <AnswerChoices />
           <BaoScore />
           <Score />
       </div>      
    );
}


export default App;

      

        
        
        
      

    

Score.js content

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

 function Score(props) {

 return (
 <div>
 <CSSTransitionGroup 
  className="container result"
  transitionName="test"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>
 >
  <div>
    You prefer <strong>{props.testScore}</strong>!
  </div>
</CSSTransitionGroup>
</div>
);

 }

 Score.propTypes = {
 quizResult: PropTypes.string,
 };

 export default Score;