Отображение данных из json в виде предложений под панелью поиска в reactjs

У меня есть компонент AutoFill, который выглядит так:

const AutoFill = (props) => {
  console.info('proppppppsss', props)
  const results = props.results || []

  return (
    <ul>
      {results.map(({ name, href }) => (
        <li key = {href}>
          <a href = {href} target='_blank' rel='noopener noreferrer' key = {href}>
            {name}
          </a>
        </li>
      ))}
    </ul>
  )
}

---

The Json File where data gets passed through looks like this,

[
  {
    "a": {
      "apple": {
        "name": "apple",
        "href": "https://www.apple.com/"
      },
      "armadillo": {
        "name": "armadillo",
        "href": "https://www.armadillo.com/"
      }
    },
    "b": {
      "box": {
        "name": "box",
        "href": "https://www.box.com/"
      },
      "berserk": {
        "name": "berserk",
        "href": "https://www.berserk.com/"
      }
    }
  }
]

---

The fetch that gets the data from the json

import fetch from 'isomorphic-fetch'

const FetchAndParseResults = (url) => {
  return fetch(url).then(response => {
    const parsedJson = response.json()
    return parsedJson
  })
}

export default FetchAndParseResults

---

The search that makes use of the autofill

import AutoFill from './autofill'
import PropTypes from 'prop-types'

export default class Searchbar extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      className: Styles.input,
      icon: Styles.icon__wrapper,
      value: []
    }
    this.input = React.createRef()
  }

  openInput = () => {
    this.setState({
      className: Styles.input__active,
      icon: Styles.iconWidth
    }, () => {
      this.input.focus()
    })
    this.props.onOpen && this.props.onOpen()
  }

  closeInput = () => {
    this.setState({
      className: Styles.input,
      icon: Styles.icon__wrapper
    })
    this.props.onClose && this.props.onClose()
  }

  handleChangeEvent = event => {
    let value = event.target.value
    this.setState({ value })
    this.props.performSearch(value)
  }

  handleSubmit = event => {
    event.preventDefault()
  }

  render () {
    console.info('results', this.props.results)
    console.info('state.value', this.state.value)
    return (
      <div>
        <form onSubmit = {this.handleSubmit} className = {Styles.search}>
          <div className = {this.state.icon}>
            <Icon className = {Styles.icon__wrapper} iconName='faSearch' onClick = {this.openInput} />
          </div>
          <Search autoComplete='off' value = {this.state.value} onChange = {this.handleChangeEvent} id='search' tabIndex='0' myref = {input => { this.input = input }} className = {this.state.className} onBlur = {this.closeInput} placeholder='Search' />
        </form>
        <div>
          <AutoFill results = {this.props.results} />
        </div>
      </div>
    )
  }
}

Search.propTypes = {
  performSearch: PropTypes.func,
  results: PropTypes.array
}

---

the searchContainer that makes use of everything

import React from 'react'
import Searchbar from './index.js'
import FetchAndParseResults from './FetchAndParseResults.js'

class SearchContainer extends React.Component {
    state = {
      results: []
    }

    performSearch = event => {
      return FetchAndParseResults('static/autofill.json').then(data => {
        this.setState({ results: data })
      })
    }

    render () {
      return (
        <Searchbar
          performSearch = {this.performSearch}
          results = {this.state.results}
        />
      )
    }
}

export default SearchContainer

---

At <a href = {href} target='_blank' rel='noopener noreferrer' key = {href}>{name}</a> the data of the names should be displayed but instead of the names i get this, https://gyazo.com/647176b09afcd55b4238f7975c0e7488

Пустой неупорядоченный список.

Поэтому помощь будет очень признательна, и заглянул.