Why scrollToIndex is not working in RTL?

function ColumnVirtualizerFixed() {
  const parentRef = React.useRef(null);

  const columnVirtualizer = useVirtualizer({
    isRtl: true,
    horizontal: true,
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
    overscan: 5,
    gap: 20,
  });

  return (
    <>
      <div
        style={{
          width: `400px`,
          height: `100px`,
        }}
      >
        <div
          dir="rtl"
          ref={parentRef}
          className="List"
          style={{
            width: '100%',
            height: '100%',
            overflowX: 'scroll',
            overflowY: 'hidden',
            scrollbarWidth: 'none',
          }}
        >
          <ul
            style={{
              width: `${columnVirtualizer.getTotalSize()}px`,
              height: '100%',
              position: 'relative',
              listStyle: 'none',
              margin: 0,
              padding: 0,
            }}
          >
            {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
              <li
                key={virtualColumn.index}
                className={
                  virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'
                }
                style={{
                  position: 'absolute',
                  height: '100%',
                  width: `${virtualColumn.size}px`,
                  transform: `translateX(-${virtualColumn.start}px)`,
                  border: '1px solid black',
                  padding: 0,
                }}
              >
                Column {virtualColumn.index}
              </li>
            ))}
          </ul>
        </div>
      </div>
      <button
        onClick={() => {
          columnVirtualizer.scrollToIndex(6, {
            behavior: 'smooth',
            align: 'center',
          });
        }}
      >
        scroll
      </button>
    </>
  );
}

function ColumnVirtualizerFixed() {
  const parentRef = React.useRef(null);

  const columnVirtualizer = useVirtualizer({
    isRtl: true,
    horizontal: true,
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 100,
    overscan: 5,
    gap: 20,
  });

  return (
    <>
      <div
        style={{
          width: `400px`,
          height: `100px`,
        }}
      >
        <div
          dir="rtl"
          ref={parentRef}
          className="List"
          style={{
            width: '100%',
            height: '100%',
            overflowX: 'scroll',
            overflowY: 'hidden',
            scrollbarWidth: 'none',
          }}
        >
          <ul
            style={{
              width: `${columnVirtualizer.getTotalSize()}px`,
              height: '100%',
              position: 'relative',
              listStyle: 'none',
              margin: 0,
              padding: 0,
            }}
          >
            {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
              <li
                key={virtualColumn.index}
                className={
                  virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'
                }
                style={{
                  position: 'absolute',
                  height: '100%',
                  width: `${virtualColumn.size}px`,
                  transform: `translateX(-${virtualColumn.start}px)`,
                  border: '1px solid black',
                  padding: 0,
                }}
              >
                Column {virtualColumn.index}
              </li>
            ))}
          </ul>
        </div>
      </div>
      <button
        onClick={() => {
          columnVirtualizer.scrollToIndex(6, {
            behavior: 'smooth',
            align: 'center',
          });
        }}
      >
        scroll
      </button>
    </>
  );
}