Sticky - Sticky.jsx

function Sticky({ children, as = "div", className = "", ...rest }) {
  // 1️⃣ Get TOP & BOTTOM sentinels to associate with
  const { topSentinelRef, bottomSentinelRef } = useContext(
    StickySectionContext
  );
  const dispatch = useStickyActions();

  // 2️⃣ Associate the current element with TOP & BOTTOM sentinels
  // so that we can retrieve correct child target element
  // from either a top sentinel or a bottom sentinel
  const addStickyRef = stickyRef => {
    dispatch.addStickyRef(topSentinelRef, bottomSentinelRef, stickyRef);
  };

  const Component = as;

  // 3️⃣ No magic - Just apply the "sticky" position using class
  return (
    <Component
      ref={addStickyRef}
      className={styles.sticky + className || ` ${className}`}
      {...rest}
    >
      {children}
    </Component>
  );
}