ReactJS - TypeError: не удается прочитать имя свойства неопределенного

Я получаю данные из API и хочу показать на экране некоторые объекты (например, объект «имя»), и я получаю следующую ошибку:

"TypeError: Cannot read property 'name' of undefined"

Я уже пытался показать данные после запроса API (с логическими значениями)

Кто-нибудь знает, в чем может быть проблема?

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      products: {},
    }
    this.fetchDevices = this.fetchDevices.bind(this);
}

async fetchDevices() {
  const url = 'my url';
  const response = await fetch(url, {method : 'GET', headers : headers});
  const data = await response.json()
  this.setState({products : data.value})
}

componentDidMount() {
  this.fetchDevices();
}

render() {
  return (
    <div>
      {this.state.products ? <p>{this.state.products[0].name}</p> : null}     
    </div>
  )}
}

export default App

{
"value": [
    {
        "urn": null,
        "name": "New_COMEC",
        "description": null,
        "icon": "icon-energy-meter",
        "customIdFormat": null,
        "customIdDisplay": true,
        "customIdRequired": true,
        "serialNumberFormat": null,
        "serialNumberDisplay": true,
        "serialNumberRequired": false,
        ....,
    }
]