ReactJS MUI Component not rendering inside map function

Question

I am using ReactJS along with Material UI Components. I am trying to render a custom element using the below code. The options array is never empty and the console logs are showing as expected - "Adding element to grid ..". However, the element is not rendered on the browser(I checked the browser Inspector to confirm).

What am I missing?

import React from "react";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
const Element = (props) => {
  const {options} = props;
  
  return(
     // If I simply pass a JSX component at this location, it renders fine. 
     // But not inside the map function
     {options.map((opt) => {
        opt.elements.length > 0 && (
          <Grid container spacing={4}>
            {opt.elements.map((el) => (
              <Grid item xs={12} sm={6}>
                {console.log("Adding element to grid ..", el.element_name)}
                <h1>{el.element_name}</h1>
              </Grid>
            ))}
          </Grid>
        );
      })} 
  )
}

Answer 1

You should use parentheses instead of curly brackets inside the first map in the return()

{options.map((opt) => (
        opt.elements.length > 0 && (
          <Grid container spacing={4}>
            {opt.elements.map((el) => (
              <Grid item xs={12} sm={6}>
                {console.log("Adding element to grid ..", el.element_name)}
                <h1>{el.element_name}</h1>
              </Grid>
            ))}
          </Grid>
        );
      ))}