поместил div между компонентом StickyContainer, чтобы сделать его липким

Как сказано в документации, вам нужно поместить ваш div в функцию обратного вызова рендеринга компонента, т.е.

class App extends React.Component {
  render() {
    console.log("App---->");
    return (
      <StickyContainer>
        <Sticky>
          {({ style }) => <div style={style}>I am sticky</div>}
        </Sticky>
        <SearchBar />
        <div>I am sticky</div>
        <WholeText />
        <UploadDocuments />
        <VerticalLinearStepper />
        {/* ... */}
      </StickyContainer>
    );
  }
}

«Обратный вызов рендеринга» в этом случае просто означает, что дочерний элемент компонента <Sticky> должен быть функцией, которая возвращает то, что должно быть визуализировано. Это позволяет родителю передавать дополнительную информацию для использования при рендеринге потомка через аргументы функции. Синтаксис для указания функции как дочернего элемента:

<Parent>{/*function goes here*/}</Parent>

В приведенном выше примере функциональной частью является ({ style }) => <div style={style}>I am sticky</div>, который предполагает, что параметр, который будет передан функции, будет объектом с [ 115], а затем функция возвращает элемент div, используя этот стиль.

Если вы посмотрите на код реагирования , то обнаружите, что в его методе render он делает следующее:

  const element = React.cloneElement(
      this.props.children({
        isSticky: this.state.isSticky,
        wasSticky: this.state.wasSticky,
        distanceFromTop: this.state.distanceFromTop,
        distanceFromBottom: this.state.distanceFromBottom,
        calculatedHeight: this.state.calculatedHeight,
        style: this.state.style
      }),
      {
        ref: content => {
          this.content = ReactDOM.findDOMNode(content);
        }
      }
    );

Когда он вызывает this.props.children(...), которая выполняет функцию, указанную вами как дочернюю, и вы можете видеть, что последнее свойство объекта, которое она передает функции, является свойством style.