this.props.position.interpolate is undefined and not a function

Question

I have a component which has a scrollview

class DiscoverThings extends React.Component {
  state = { scrollY: new Animated.Value(0), };

  onPageScroll = ({ nativeEvent }) => {
    Animated.event(
       [{nativeEvent: 
       {contentOffset: {y: this.state.scrollY}}}],
       {useNativeDriver: true},
      );
    this.props.setScrollableDistance(this.state.scrollY);
   }


  render(){
   return(
    <ScrollView
       onScroll={this.onPageScroll}
       scrollEventThrottle={1500}
       />
  )
  }
}

The function setScrollable distance dispatches the value of scrollY to the global store

export const setScrollableDistance = scrollY => ({
  type: SET_SCROLLABLE_DISTANCE,
  payload: scrollY,
})

And in the reducer I have

case SET_SCROLLABLE_DISTANCE:
console.log("********************", action.payload);
  return{
    ...state,
    scrollY: action.payload,
  };

The value of the scrollY as coming from the reducer is being used to update the height of the footer in another component using Animated API.

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet, TouchableHighlight, Animated } from 'react-native';
import {connect} from 'react-redux';

const HEADER_MAX_HEIGHT = 60;
const HEADER_MIN_HEIGHT = 0;
const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;

class Footer extends React.Component{
  render(){
    const headerHeight = this.props.app.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE],
      outputRange: [HEADER_MAX_HEIGHT,HEADER_MIN_HEIGHT],
      extrapolate: 'clamp',
    });
    return(
      <Animated.View style={styles.navbarContainer}>
        {
          navbarOptions.map((option) => {
            return (
              <TouchableHighlight
                key={option.slug}
                onPress={() => onSelect(option)}
              >
                <View style={styles.menuContainer}>
                  <Text style={isSelected ? styles.selectedMenu : styles.menu}>
                    {option.title}
                  </Text>
                </View>
              </TouchableHighlight>
            );
          })
        }
      </Animated.View>
    )
  }
}
const mapStateToProps = ({
  app,
}) => ({
   app,
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(Footer);

Here, I get the error that this.props.app.scrollY.interpolate is undefined and not a function.

What should I do?