I have Array Like this.

I need to render this data one by one with my component . So I tried to create a map function and render this data true the map. But It's not working. I Can't find the solution for that. I am struggling with this error with like hours. I really need your help.

This is the component that I need to render my data one by one.

function addVariantSection(data) {
    return(
      <Grid container spacing={10}>
        <Grid item xs={12} style={{ justifyContent: 'space-between', display: 'flex' }}>
          <div>{data.variant1}</div>
          <Checkbox color='primary' inputProps={{ 'aria-label': 'secondary checkbox' }} />
        </Grid>
      </Grid>

    )
  }

This is how I pass the data to this component,

{itemVariant.map((item)=>addVariantSection(item))}