Access function of component wrapped with HOC in React

I have a HOC called withBackgroundAndAnimation that renders a components background (Users can set a video or image as background) since it is something that repeats itself often.

For this question, take a look at the relevant 3 components:

ViewManager - my top-level component that manages what tab is actually active.

|

withBackgroundAndAnimation - HOC that enhanced Components by giving them the correct background.

|

PinlockComponent - A component that is presented when the app initializes and the user has to enter a 4-digit pin.

So as you can imagine, I am using withBackgroundAndAnimation to enhance the PinlockComponent.

This is where I am having trouble:

When the user correctly inputs the 4 digit pin the onCorrectPin prop-method would have been called and the ViewManager would have removed the PinlockComponent. Now I have the HOC in the way and can't seem to access the WrappedComponents method callback.

How can I achieve this?

Code

export const withBackgroundAndMountingAnimation = WrappedComponent => {
  class WrapperComponent extends React.PureComponent {
    constructor(props) {
      super(props)
      this.state = {
        opacityValue: new Animated.Value(0),
      }
    }

    componentDidMount() {
      return Animated.timing(
        this.state.opacityValue, 
        {
          toValue: 1,
          duration: 300,
          easing: Easing.ease,
          isInteraction: false,
          useNativeDriver: true,
        }
      ).start();
    }

    componentWillUnmount() {
      return Animated.timing(
        this.state.opacityValue, 
        {
          toValue: 0,
          duration: 100,
          easing: Easing.ease,
          isInteraction: false,
          useNativeDriver: true,
        }
      ).start();
    }

    ...

    render() {
      const { settings } = this.props
      const { backgroundOpacity } = this.props.settings.layoutCategory

      if (settings.backgroundCategory.isBackgroundUsingVideo && !Video) {
        Video = require('react-native-video').default
      } else if (!FastImage) {
        FastImage = require('react-native-fast-image').default
      }

      return (
        <View style={styles.flex1}>
          <Animated.View style={[styles.flex1, { opacity: this.state.opacityValue }]}>
            {this.renderVideo()}

            <WrappedComponent {...this.props}/>
          </Animated.View>
        </View>
      )
    }
  }

  const mapStateToProps = (state) => {
    return {
      settings: state.settings,
    };
  };

  return connect(mapStateToProps)(WrapperComponent);
}