loop over objects in array in a function then output values

I'm attempting to loop over an array of objects from a config file in a react app, and print out on the page the values of "headline, problem, and fix". I am attempting to loop over each object in the array in loopMessages function. But nothing is working to get the values to show up on the page. Is there a way to get my values to appear?

CONFIG:`const messages = [{  headline: "some headline",  problem: "some text here for description.",  fix: "some solution"},{  headline: "some headline",  problem: "some text here for description.",  fix: "some solution"},{  headline: "some headline",  problem: "some text here for description.",  fix: "some solution"},{  headline: "some headline",  problem: "some text here for description.",  fix: "some solution"},{   headline: "some headline",  problem: "some text here for description.",  fix: "some solution"},{   headline: "some headline",  problem: "some text here for description.",  fix: "some solution"}]export default messages;`

import styles from "./styles.css";import messages from "../../config/messages.js";const loopMessages = () => {  Object.values(messages).forEach((value) => {   return  <p>value.headline<p><p>value.problem<p><p>value.fix<p>   });  });};const Guidlines = () => {  return (<><div className="sub-heading-container"><h3 className="sub-heading">Messages</h3></div><div className="guide-container"><div className="square">          {loopMessages()}</div></div></>  );};export default Guidlines;

I tried using Object.values with a forEach for my loop but my page is still blank and not printing out each object.

const loopMessages = () => {  Object.values(messages).forEach((value) => {   return  <p>value.headline<p><p>value.problem<p><p>value.fix<p>   });  });