JSX function is not working properly and function part is not getting shown on web page

The code is one of the snippet of one of the react component for a project. I am have imported here css file for the styling and have already done with material ui part. In the main section the function written for The newArticle is not appearing on web page.

import "./Widgets.css";
import InfoIcon from '@mui/icons-material/Info';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';



function Widgets() {

{/*BEM naming convention*/}

const newsArticle = (heading, subTitle) => {
    <div className="widgets__article">
        <div className="widgets__articleLeft">
                <FiberManualRecordIcon/>
        </div>
        <div className="widgets__articleRight">
            <h2>{heading}</h2>
            <p>{subTitle}</p>
        </div>
    </div>
};

        return (
            <div className="widgets">
                <div className="widgets__header">
                    <h2>LinkedIn News</h2>
                    <InfoIcon/>
                </div>
                {newsArticle("Some text","few text")}
                {newsArticle("Some sentences","Some sentences")}
                {newsArticle("Some sentences","Some sentences")}
                {newsArticle("few text","few text")}
                {newsArticle("few text","few text")}
                {newsArticle("few text","few text")}
            </div>
        );
    };

export default Widgets;

>Solution :

You need to add a return statement for your JSX. You missed that in your method. Change your code like the below.

const newsArticle = (heading, subTitle) => {
  return (
    <div className="widgets__article">
      <div className="widgets__articleLeft">
        <FiberManualRecordIcon />
      </div>
      <div className="widgets__articleRight">
        <h2>{heading}</h2>
        <p>{subTitle}</p>
      </div>
    </div>
  );
};

I would suggest you create a component if you want to return JSX. I am attaching the sandbox with components.