Отобразить массив реагирования из Axio URL в поле выбора в группе выбора

Question

Я пытаюсь отобразить выпадающий список с двумя атрибутами email и именами, которые я хочу, чтобы они отображались, когда одна группа завершила свои элементы, чем должна начинаться вторая, если я добавлю users.ids или id. Во второй функции карты выдает ошибку

 class Home extends Component {
      state= {
        users: [],
          showEmails: false,
        showNames: false,
        showUsername: false
      }

    componentDidMount(){
      axios.get('https://jsonplaceholder.typicode.com/users')
      .then (res => {
        console.log(res)
        this.setState({
          users: res.data

        })
      })


    }  
render() { 

const { users } = this.state;

        const nameList = users.length ? (
          <div className="input-group input-group-sm mb-2">
          <select className="form-control form-control-sm" id="select1" multiple="multiple" >
            {
               Object.keys(users).map(ids =>{
             console.log(ids)
                return(
               users.map((user,i) => {
                   console.log(user)
                   console.log(i)
                   return(
                  <Fragment> 

                      <optgroup label= "Names" >
                      <option  key={i} value={user.name}> {user.name}
                      </option>
                      </optgroup>



                  <optgroup  label=" Emails">
                       <option  key={i} value={user.email}> {user.email}
                       </option>
                       </optgroup>

                       </Fragment>
                   )
                  })
                )

              })
            }
          </select>
          </div>

        ) : 'No Data';