I am encountered a problem while learning reactJS.Here, I have a HomePage Component where forEach not working in ReactJs while I am trying to get the data from the array defined. Below is the code:

import React, { useEffect } from "react";
import ChessRankings from "../components/ChessRankings";
import "../App.css";


import gifPath from "../assets/pieceChess.gif";

const paraContent = [

"ChessMania is a website that gives the latest update for chess. Chess is one of the 
most tactical games played across the globe. Here our main focus is to present the 
various chess articles. However, this website also covers the basics of learning 
objectives of chess as well as current chess rankings at the international level.",

"Subsequently, we also cover the common FAQs related to chess, the notation, and the 
type of game played in chess. You also get a glimpse of various prestigious 
tournaments of chess played across the globe within a chess calendar and about the 
esteemed players taking part in, it.",

"The last section takes you through the profile of any Lichess Player that loves 
chess. The profile section displays the basic introduction, including name, 
nationality, followers, and total games played. Later it shows the player's rating in 
each variant and the percentage of wins and losses. It also shows the chess variant 
played by that user most and which are least. Finally, it shows the statistics of the 
player in the puzzle section.",

];

const HomePage = () => {
  useEffect(() => {
     document.title = "ChessMania - Home";
  }, []);

return (
<>
  <h1>Hello , Welcome to Chess Mania</h1>
  <br />
  <div className="text-center">
    <img src={gifPath} alt="gif" />
  </div>
  <hr />

  {
    paraContent.forEach((element) => {
    //console.log(element);
    return (<p className="about-paragraph">{element}</p>)
     })
  }

  
    </>
  );
};

 export default HomePage;

I am unable to figure out the error? Anyone, please tell me what is the problem here?