Issue with React Don't Know What's not Working

Tell us what’s happening:
I nested the child elements into the parent. Then I rendered them by using React DOM render where I first inserted the react element with the proper notation, and then accessed the id of the div I want to assign it to. The output shows up just fine, but for some reason FCC returns an error that says it’s not rendered, but I can see that it is. I’m not sure where I’m going wrong here. If anyone has any insight they can give, that would be very much appreciated.

class TypesOfFood extends React.Component {
constructor(props) {
render() {
  return (
      <h1>Types of Food:</h1>
      {/* change code below this line */}     <Fruits />
    <Vegetables />
      {/* change code above this line */}

// change code below this line
ReactDOM.render(<TypesOfFood />, document.getElementById("challenge-node"));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763.

Challenge: Render a Class Component to the DOM

Link to the challenge:

Not 100% why this is not working other than moving it to the next line will solve the issue. Will investigate further.