Can the sticky header follow the horizontal scrolling?

[mrdulin]

import './style.css';
import Sticky from 'react-sticky-el';

export const App = () => {
  const panels = [{ id: 1 }, { id: 2 }, { id: 3 }];

  return (
    <div className="wrapper">
      <div style={{ display: 'flex', marginTop: 40 }}>
        {panels.map((p) => (
          <div key={p.id} className="panel">
            <Sticky scrollElement=".wrapper">
              <div className="panel-header">header {p.id}</div>
            </Sticky>
            <div className="panel-content">content {p.id}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

style.scss:

.wrapper {
  position: relative;
  height: 300px;
  width: 600px;
  overflow: auto;
  border: 1px solid #ddd;
}

.panel-header {
  background-color: red;
}

.panel-content {
  background-color: yellow;
  height: 600px;
}

.panel {
  width: 200px;
  margin: 0 10px;
  flex-shrink: 0;
}

The sticky header does not follow the horizontal scrolling.

stackblitz