I'm working on reactJS and I try to display information from my dictionary, but it doesn't work.

I already did a loop with "for" but I can't display it so I tried to do a map function.

There is my code :

const Mails = Object.freeze([
    {
        from: "Ludo",
        to: "Guillaume",
        when: "12:05:2022",
        Subject: "Absence",
        Message: "ptit tube",
        Vu : ''
    },
    {
        from: "Luda",
        to: "Guillaume",
        when: "12:05:2022",
        Subject: "Absence",
        Message: "ptit tube",
        Vu : ''
    },
]);

const test = () => {
    for (var index = 0; index < Mails.length; index++) {
        console.log(Mails[index]["from"])
      //   return(
      //       <h1>Mails[index]["from"] </h1>
      //   )
    }
    return (
     <h1>a</h1>
    );
};

export const Messagerie = () => {

    const obj = [{
        foo: 'bar',
        baz: 42
      }]
    
       const list_mails = () => {   
        for (var index = 0; index < Mails.length; index++) {
            console.log(Mails[index]["from"])
          //   return(
          //       <h1>Mails[index]["from"] </h1>
          //   )
        }
    };

    return (
        <Layout title="Messagerie" loggedIn={true} accountType={parentCookies.name}>
            <Seo title="Messagerie" />

            <div>
                {list_mails()}
            </div>
        </Layout>
    );
};

I want to display ludo, then luda in a map function.

I already tried to do my for loop function in a return but it seems impossible.

I tried to follow this example:

How to map a dictionary in reactJS?

but it prints all the elements. I just want to display (or take) the from

(The console.log in my test function prints the corrects elements but I'm not able to return them).

Thank you for yours answers