In Render, Map works for just outter map. So, the Inner map is not render. You should not use the inner map.

I recommend using filter method. Like this

row.products.filter(*condition*).map(()=>{
      return <div></div>
)

You need to return your "pp" returned value correctly.

For example:

let firstArray = [{
  id: 1,
  name: "asd"
}, {
  id: 2,
  name: "fgh"
}];
let secondArray = [{
  id: 1,
  name: "hjk"
}, {
  id: 2,
  name: "zxc"
}];

firstArray.map(() => {
  const pp = firstArray.filter((ele, ind) => ind === firstArray.findIndex(elem => elem.id === 2))

  return pp.map((data) => {
    return (
      console.log(data)
    )
  })
})

{promotions.map((row) => (
      <div>
        <h1>{row.name}</h1>  //This is working
        {row.products.map(() => {
          const pp = row.products.filter( (ele, ind) => ind === row.products.findIndex( elem => elem.productId === ele.productId))
    
          return pp.map((data)=>{
            return(
              <Chip
                key={`${row.productId}_${data.productId}`}
                classes={{ root: classes.productsChipRoot }}
                label={data.productName}
                style={{ margin: 3, backgroundColor: '#BBD7FB' }}
              /> 
            )
          })
        })}
      </div>
    ))}