react，如何将新的数据加入到antd mobile的IndexBar序列的顶部？

在使用的react版本如下：

已写的代码：

import React from 'react'
import { IndexBar, List } from 'antd-mobile';
import axios from 'axios';
import NavHeader from '../../components/NavHeader';
import { getCurrentCity } from '../../utils'
import './style.css';
const charCodeOfA = 'A'.charCodeAt(0);
let groups = Array(26)
    .fill('')
    .map((_, i) => ({
    title: String.fromCharCode(charCodeOfA + i),
    items: []
}))

// 获取热门城市数据
//   let cityHot = []
//     const hotRes = axios.get('http://localhost:8080/area/hot').then(hotRes=>{
//     cityHot = hotRes.data.body
//     List['hot'] = hotRes.data.body
//     List.unshift('hot')
//     })

//   // 获取当前定位城市
//     const curCity = getCurrentCity()
//     List['#'] = [curCity]
//     List.unshift('#')

let cityList = []
  const res = axios.get('http://localhost:8080/area/city?level=1').then(res=>{
    cityList = res.data.body
    groups.map((item)=>{
      cityList.map((city)=>{
      if(city.pinyin.slice(0,1).toUpperCase()==item.title){
        item.items.push(city)}
      })
    })
  })
  export default () => {
        return (
        <div className='citylist'>
        {/* 顶部导航栏 */}
        <NavHeader>城市选择</NavHeader>
          {/* IndexBar序列 */}
  <div className='indexbar' style={{ height: window.innerHeight - 45 }}>
  <IndexBar>
        {groups.map(group => {
            const { title, items } = group;
            return (<IndexBar.Panel index={title} title={`${title}`} key={`${title}`}>
              <List>
                {items.map((item, index) => (<List.Item key={index}>{item.label}</List.Item>))}
              </List>
            </IndexBar.Panel>);
        })}
      </IndexBar>
      </div>
  </div>
        )
}

目前效果：

希望实现以下效果——自动添加#和hot到右边列顶部，且在左边内容区域显示当前城市和热门城市相应数据：

IndexBar序列属性说明提到，使用brief属性可以编辑右侧索引条中的显示内容：

请问代码应该如何修改？

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：react antd-mobile安装及按需加载