iOS Safari Rendering Issue: Sticky Header Sometimes Fails to Update After DOM Changes

I’m encountering an issue on iOS when rendering a list using React. Each list item uses the array index as the React key and consists of two parts:

a header section that uses position: sticky for dynamic sticking behavior, and

a body section whose height is automatically adjusted based on its content.

When the list data is updated, I sometimes observe that the sticky header content does not update visually in time, even though the underlying data and DOM have changed.

// demo.jsx
import React, { useState } from 'react';
import { Button } from '@iftide/mobile';

import './style2.less';

// import data1 from './data1.json';
// import data2 from './data2.json';
const prefixCls = 'im-detaillist';

const data1 = [
  {
    sectionTitle: '2025年05月'
  },
  {
    sectionTitle: '2025年04月'
  },
  {
    sectionTitle: '2025年03月'
  }
];

const data2 = [
  {
    sectionTitle: '2023年08月'
  },
  {
    sectionTitle: '2023年07月'
  },
  {
    sectionTitle: '2023年06月'
  },
  {
    sectionTitle: '2023年05月'
  }
];

export default function App() {
  const [list, setList] = useState(data1);
  const [toggle, setToggle] = useState(true);

  return (
    <div>
      <Button
        title="更新2"
        onClick={() => {
          setToggle(!toggle);
          setList(data2);
        }}
      />
      <div className={`${prefixCls}-container2`} style={{ height: `700px` }}>
        {list.map((section: any, sectionIdx: number) => {
          return (
            <div
              className={`${prefixCls}`}
              key={String(sectionIdx)}
              // id={section.sectionTitle}
            >
              <div className={`${prefixCls}-section-title`} role="text">
                {section.sectionTitle}
              </div>
              <div
                style={{
                  background: 'green',
                  height: `${Math.ceil(400 * Math.random()) + 50}px`
                }}
              >
                省略
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

 .@{prefixCls}-section-title {
      position: sticky;
      position: -webkit-sticky;
      will-change: transform;
      top: 0;
      z-index: 1;
      padding-left: 11px;
      width: 100%;
      height: 30px;
      font-size: var(--font-size-s);
      font-weight: 400;
      line-height: 30px;
      color: #000000;
      background-color: #F4F5F7;
      letter-spacing: 0;
    }