Console.log is showing correct value, but the value is not rendering in React/NextJS when mapping values

Question

I am building a food ordering system and have run across a problem with rendering the cart item modifiers within the cart itself.

The console.log(mod.modName) correctly shows the name of the modifier(s) I need to render, but it won't show up in the view itself.

Also, I tested out accessing the indices of customerMods (item.customerMods[0].modName) directly, and that renders in the view as well. I don't understand what I've done wrong...

Any help is greatly appreciated!

item.customerMods array:

[

    {
        "modId": "OZRRMJBDKWGX27LOHMXYY6OE",
        "modPrice": 0,
        "modName": "No Mustard"
    },
    {
        "modId": "YVDOLIGNDCTOORF7FJOBF534",
        "modPrice": 25,
        "modName": "Extra Ketchup"
    }
]

And here's the code itself:

<ul>
      {items.map((item) => (
        <li key={item.id}>

          {item.quantity} x {item.name}  
          {item.customerMods.length > 0 ? item.customerMods.map((mod) => {
             //  {console.log(mod.modName)} -- Properly prints name of modifier
             <Text>{mod.modName}</Text>
               
          }) : "No Mods Here"}
          

          &mdash;
          <Button
            onClick={() => updateItemQuantity(item.id, item.quantity - 1) && console.log(items)}
          >
            -
          </Button>
          <Button
            onClick={() => updateItemQuantity(item.id, item.quantity + 1) && console.log(items)}
          >
            +
          </Button>
          <Button onClick={() => removeItem(item.id)}>&times;</Button>
        </li>
      ))}
    </ul>

Answer 1

{item.customerMods.length > 0 ? item.customerMods.map((mod) => {
             //  {console.log(mod.modName)} -- Properly prints name of modifier
             <Text>{mod.modName}</Text>
               
          }) : "No Mods Here"}

I don't see a return statement inside the map callback.