React basic question

{/* This bit is not rendered */}

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        { /* change code below this line */ }
          <NonCitrus />
          <Citrus />
        { /* change code above this line */ }
      </div>
    );
  }
};


{/* This one is rendered*/}
class TypesOfFood extends React.Component {
  constructor(props) {
     super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        { /* change code below this line */ }
      
        { /* change code above this line */ }
        <Vegetables />
      </div>
    );
  }
};

Hi everyone. I am not sure why the bit at the top is not rendered while the last one is. Is it because the first component (Fruits) is not called anywhere while in the second code block we use Vegetables component which has been declared in the previous lesson?

Or is it all because of how FCC works behind the scene?

Many thanks

You probably made a typo