react，引入antd mobileV5.22的List包裹着Picker一起使用遇到选中的名称显示不出来的问题

[ken428965]

已写的代码：

// 户型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4' },
  { label: '二室', value: 'ROOM|d1' },
  { label: '三室', value: 'ROOM|20' },
  { label: '四室', value: 'ROOM|ce' },
  { label: '四室+', value: 'ROOM|27' }
]
// 所在楼层
const floorData = [
  { label: '高楼层', value: 'FLOOR|1' },
  { label: '中楼层', value: 'FLOOR|2' },
  { label: '低楼层', value: 'FLOOR|3' }
]
// 朝向
const orientedData = [
  { label: '东', value: 'ORIEN|14' },
  { label: '西', value: 'ORIEN|10' },
  { label: '南', value: 'ORIEN|61' },
  { label: '北', value: 'ORIEN|ca' },
  { label: '东南', value: 'ORIEN|df' },
  { label: '东北', value: 'ORIEN|67' },
  { label: '西南', value: 'ORIEN|23' },
  { label: '西北', value: 'ORIEN|80' }
]
const RentAdd = () => {
    const [huxingvalue, setHuxingValue] = useState([])
    const [huxingvisible, setHuxingVisible] = useState(false)
    const [suozailoucengvalue, setSuozailoucengValue] = useState([])
    const [suozailoucengvisible, setSuozailoucengVisible] = useState(false)
    const [chaoxiangvalue, setChaoxiangValue] = useState([])
    const [chaoxiangvisible, setChaoxiangVisible] = useState(false)
// 户型
function Huxing() {
    return (
      <>
        <Picker
          title='户       型'
          columns={[roomTypeData]}
          visible={huxingvisible}
          value={huxingvalue}
          mouseWheel={true}
          popupClassName={styles.huxing}
          onClose={() => {setHuxingVisible(false)}}
          onConfirm={v => {setHuxingValue(v)}}
        />
      </>
    )
  }
// 所在楼层
  function Suozailouceng() {
    return (
      <>
        <Picker
          title='所在楼层'
          columns={[floorData]}
          visible={suozailoucengvisible}
          value={[suozailoucengvalue]}
          mouseWheel={true}
          popupClassName={styles.suozailouceng}
          onClose={() => {setSuozailoucengVisible(false)}}
          onConfirm={v => {setSuozailoucengValue(v)}}
        />
      </>
    )
  }
// 朝向
  function Chaoxiang() {
    return (
      <>
        <Picker
          title='朝       向'
          columns={[orientedData]}
          visible={chaoxiangvisible}
          value={[chaoxiangvalue]}
          mouseWheel={true}
          popupClassName={styles.chaoxiang}
          onClose={() => {setChaoxiangVisible(false)}}
          onConfirm={v => {setChaoxiangValue(v)}}
        />
      </>
    )
  }
return (
  <List>
          <List.Item
            extra={huxingvalue || '请选择'}
            arrow={true}
            onClick={() => {
              setHuxingVisible(true)
            }}
          >
            {Huxing()}
            户       型
          </List.Item>
          <List.Item
            extra={suozailoucengvalue || '请选择'}
            arrow={true}
            onClick={() => {
              setSuozailoucengVisible(true)
            }}
          >
            {Suozailouceng()}
            所在楼层
          </List.Item>
          <List.Item
            extra={chaoxiangvalue || '请选择'}
            arrow={true}
            onClick={() => {
              setChaoxiangVisible(true)
            }}
          >
            {Chaoxiang()}
            朝       向
          </List.Item>    
  </List>
)
}

目前效果是，第一次进入页面时，这三个项目的右边没有显示出“请选择”的文字

当点击每一项后，会从界面底部向上弹出列表框，选择列表框里的任意一项内容按确定后，刚才被点击的每一项里都能显示出对应的value值，然而没有显示出label值

试过很多方法都不能把Picker里选择到的名称放在List.Item的extra里显示出来
请问代码有哪些地方写得不对？如何才能把Picker里选择到的名称放在List.Item的extra里显示出来？请展示代码举例说明，谢谢。

[miracles1919]

[] || '请选择' 结果是什么？

[ken428965]

结果是显示了“ROOM|d4”这种值，而没有显示“二室”之类的label值