Styling a part of an array in JSX

I have an array,

const arr = [
  { age: 1, name: 'Raphael' },
  { age: 3, name: 'Inyang' },
  { age: 6, name: 'Ifiok' },
  { age: 8, name: 'Ekpedeme' }
];

I need ages above 5 to have an opacity of 0.5, while the rest will have an opacity of 1

function changeOpacityOfArray(letter) {
        if (arr.age >= 5 ) {
      letter.style.opacity= '0.5';
    }
  
}

changeOpacityOfArray(messages);

The above doesn't work in JSX,

it says cannot style an undefined element

Then in the HTML body, note the opacity in the styling

<ul style=>
    {arr.map(function(item){
         return (<li><div style=><p>{item.name}: {item.age}</p></div></li>)
      }
       )}

       </ul>