I'm new to React and in the assignment I'm working on, I have to show data in a AG Grid table. For that this is how I'm initializing `rowData` inside `useState()`, but it's not shown in the webpage. The table is empty with just column names.

```
const CommentTable: React.FC<CommentProps> = (props) => {
  const { comments }  = props;//comments is an array of an object named Comment.

  const [rowData] = useState(comments.map(comment => {
    return {
      postName: comment.inputs.postName,
      commentName: comment.name,
      size: getSize(comment)
    }
  }));

  const columnDefs = [
    { field: 'postName', headerName: 'Post Name' },
    { field: 'commentName', headerName: 'Comment Name' },
    { field: 'size', headerName: 'Size'  }
  ]
   }

  return (
    <div style={{height:'5000px', width:'100%'}}>
    <AgGridReact
      columnDefs={columnDefs}
      rowData={rowData}
    />
  </div>
)

```

The code inside `useState()` seems to have no issues but I can't understand why no data is being shown in the table on the webpage.