Solution to codeyoverflow not working

I wrote everything correct but its not working

import React from 'react';
import {comments} from './commentData';
import Card from './Card';

function App () {
  return (
    comments.map(comment => <Card commentObject={comment} />)
  )
}

import React from ‘react’;
import Header from ‘./Header’;
import Body from ‘./Body’;

function Card(props) {
return (

<Header profileImg={props.commentObject.profileImg} username={props.commentObject.username}/>
<Body comment={props.commentObject.comment}/>

</div>

)
}

export default Card;

import React from "react";

function Header(props) {
  return (
    <div>
      <img src={props.profileImg} />
      <h1>{props.username}</h1>
    </div>
  );
}

export default Header;

import React from ‘react’;

function Body(props) {
return

{props.comment}


}

export default Body;

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('app'));
root.render(<App />);

Sorry actually, after deep inspecting I realized I didn’t export app :slight_smile: