Trying to write function that takes a data object, accesses a property, iterates over array of objects and renders icons if values are found

I have a React component that's receiving a data object returned from an API response.

I'm trying to write a function that accepts a field from that data response, checks an element inside of that field and iterates over it checking each object inside the array for the value of a specific alert.

If a value for a specific alert is found I need to render an Icon for that alert.

The data object looks like this:

location: {
  ...,
details: {
  summary: [
            {
             type: 'calling',
             icon: 'phone' 
             },
             {
             type: 'power',
             icon: 'electric' 
             },
             {
             type: 'water',
             icon: 'water-icon' 
             },
           ]
        }
      }               

And here's the section where I'm trying to conditionally render the icons (this was my first pass and rudimentary attempt):

<div>
            {location.alertDetails && (
                <IconBox title={`Alerts`}>
                  <IconSection>
                  {location.details.summary.includes(type === calling) && 
                   <CallIcon />
                   }
                   {location.details.summary.includes(type === power) && 
                   <ElectricIcon />
                   }
                  {location.details.summary.includes(type === water) && 
                   <WaterIcon />
                  }
                  </IconSection>
                </IconBox>
              )}
            </div>