The RenderLeader component is not rendering even after passing the properties

Question

I'm studying in a tutorial on Reactjs. The page is working fine but the required RenderLeader component is not shown on the page. (Given that imported all the required components into the file)...Under Corporate Leadership, a blank space is rendered on my webpage.

function RenderLeader({ leader }) {
  return (
    <Media list>
      <Link to={`/aboutus/${leader.id}`}>
        {" "}
        {/* Back Quotes not normal one `` */}
        <Media tag="li">
          <Media left top href="#">
            <Media object src={leader.image} alt={leader.name} />
          </Media>
          <Media body>
            <Media heading>{leader.name}</Media>
            <Media tag>{leader.designation}</Media>
            {leader.description}
          </Media>
        </Media>
      </Link>
    </Media>
  );
}

function About(props) {
  const leaders =
    props.leaders &&
    props.leaders.map((leader) => {
      return (
        <div key={leader.id} className="col-12 col-md-5 m-1">
          <p>Leader {leader.name}</p>
          <RenderLeader leader={leader} />
        </div>
      );
    });

  return (
    <div className="container">
      <div className="row">
        <Breadcrumb>
          <BreadcrumbItem>
            <Link to="/home">Home</Link>
          </BreadcrumbItem>
          <BreadcrumbItem active>About Us</BreadcrumbItem>
        </Breadcrumb>
        <div className="col-12">
          <h3>About Us</h3>
          <hr />
        </div>
      </div>
      <div className="row row-content">
        <div className="col-12 col-md-6">
          ........
        </div>
        <div className="col-12">
          .....
        </div>
      </div>
      <div className="row row-content">
        <div className="col-12">
          <h2>Corporate Leadership</h2>
        </div>
        <div className="col-12">{leaders}</div>
      </div>
    </div>
  );
}

export default About;