我在 React 中组件之间传递 refs 时遇到了困难。我决定使用 React.forwardRef，但遇到了一个问题。这是我的代码

const Wrapper = React.forwardRef((props, ref) => {
  return (
    <StyledWrapper ref={ref} >
      {console.log(ref.current)}
      <ParallaxProvider scrollContainer={ref.current}>
        <TransitionProvider value={ref.current}>{children}</TransitionProvider>
      </ParallaxProvider>
    </StyledWrapper>
  );
});

export default class MainTemplate extends React.Component {
  constructor(props) {
    super(props);
    this.scrollContainer = React.createRef();
  }


  render() {
    const { toggled, overflow } = this.state;
    const { uri, children } = this.props;
    return (
      <>
        <SEO />
        <GlobalStyle />
        <ThemeProvider theme={GlobalTheme}>
          <>
            <Hamburger handleToggle={this.handleToggle} />
            <Perspective active={toggled}>
              <Navigation pathname={uri} handleToggle={this.handleToggle} />
              <Wrapper
                ref={this.scrollContainer}
              >
                {children}
              </Wrapper>
            </Perspective>
          </>
        </ThemeProvider>
      </>
    );
  }
}

我需要将 ref.current 传递给 and，但问题是 ref.current 始终为空。有人能解释一下这种行为吗？我该如何让它工作？