Access what inside an element React

Question

function Lesson1(props) {
    return (<div><Lesson name="Name of the lesson"></Lesson></div>)
}

So Lesson is not a child of Lesson1, and I don't know what to call it (so I can't do google search). In another component, I try to render [<Lesson1 />, <Lesson2 />] array. I want to use map to map from Lesson1 to Lesson name props. Don't know how to access it. Please help!

class HomePage extends React.Component {
  constructor(props){
    super(props);
    let lessons = [<Lesson1 key="1" />, <Lesson2 key="2" />];
    this.state = {lessons: lessons};
  }
render() { 
    return (
      <div className="homePage">
        <div className="lessonList">
          { this.state.lessons // here i want to render Lesson name of Lesson1 and Lesson2 instead of full Lesson1 and Lesson2
          }
        </div>
      </div>
    );
  }
}