React, display a customized array in the return of the main function

I have a react project with the home.jsx file where I create an array of JSON:

function Home() {
  const posts = [
    {
      id:1,
      title:"Point Break",
      year:"1992",
      category:["Action","Hold-up","Crime","Surfing","Cult Movie"],
      description:"The film features Reeves as an undercover FBI agent....",
      image: "/movies/1.png"
    },{..}
//etc..

Then in the return of the home function I render that list like that:

return (
posts.map(
          post=>(
            <div className="post" key={ post.id}>
              <div className="img">
              </div>
              <div className="content">
                <h1>{post.title}</h1>         
                <p>Category: 
                  {  
                    post.category.map( element =>( element+", "))
                  }</p>                  
                <p>{post.description}</p>                    
              </div>                 
            </div>
))}

The problem comes when I want to render the category key with its array, with a comma between the words but not the last, because there is no word after that The output looks like that

I want to avoid the last comma in the image, but apparently I cannot create any logic in the return. How can I achieve this? Do I need to make a function outside the return?

I already tried something like that:

  const filterCommas = (list,listlength) => {
    var $i=0;
    var renderlist=""
    list.forEach(element => {
      if($i<=listlength-1){
        renderlist += element + ", "
      }
      $i+=1;
    });
    return filteredList;
  }

But I cannot call it from the return function. How can I filter the commas?