How to use the react-native-reanimated.Extrapolate function in react-native-reanimated

const item = config.values[key];

        const inputRange = [0, config.animation.duration];
        const outputRange = [item.from, item.to];

        // reverse input range
        // in order to animate value in reverse way
        // from `to` to `from`
        if (stateValue) {
          outputRange.reverse();
        }

        const valueAnimation = A.interpolate(interpolator, {
          inputRange,
          outputRange,
          extrapolate: A.Extrapolate.CLAMP,
        });

        animatedBlock.push(valueAnimation);

        animationValues[key] = A.block(animatedBlock);
      });

const AppleMusic = () => {
  let bottomSheetRef = React.createRef()
  let fall = new Animated.Value(1)

  const animatedSongCoverTopPosition = Animated.interpolate(fall, {
    inputRange: [0, 1],
    outputRange: songCoverTopPositions.slice().reverse(),
    extrapolate: Animated.Extrapolate.CLAMP,
  })

  const animatedSongCoverSize = Animated.interpolate(fall, {
    inputRange: [0, 1],
    outputRange: [songCoverSizes[0], songCoverSizes[1]].slice().reverse(),
    extrapolate: Animated.Extrapolate.CLAMP,
  })

  const animatedHeaderContentOpacity = Animated.interpolate(fall, {
    inputRange: [0.75, 1],
    outputRange: [0, 1],
    extrapolate: Animated.Extrapolate.CLAMP,
  })

  const onFlatListTouchStart = () => {
    bottomSheetRef.current!.snapTo(0)

(
    value: A.Value,
    input1: A.Adaptable,
    input2: A.Adaptable,
    output1: A.Adaptable,
    output2: A.Adaptable,
  ) =>
    A.interpolate(value, {
      inputRange: [input1, input2],
      outputRange: [output1, output2],
      extrapolate: A.Extrapolate.EXTEND,
    }),
);

interpolateOnImageHeight(outputRange: Array) {
    const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
    return this.props.scrollValue.interpolate({
      inputRange: [0, headerScrollDistance],
      outputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
  }

render() {
    const { scrollValue } = this.props;
    const headerScale = scrollValue.interpolate({
      inputRange: [-this.props.maxHeight, 0],
      outputRange: [3, 1],
      extrapolate: Animated.Extrapolate.CLAMP,
    });

    let height: ReturnType | number = this.props.maxHeight;

    if (this.props.isForeground && this.props.minHeight) {
      const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
      height = scrollValue.interpolate({
        inputRange: [0, headerScrollDistance],
        outputRange: [this.props.maxHeight, this.props.minHeight],
        extrapolate: Animated.Extrapolate.CLAMP,
      });
    }

    const headerTransformStyle = {
      height,
      transform: !this.props.disableHeaderGrow ? [{ scale: headerScale }] : undefined,
    };

    return (
      
        {this.props.render()}
      
    );

return Object.keys(normalized).reduce((acc, name) => {
    const pairs = normalized[name];

    const { inputRange, outputRange } = generateRanges(pairs);

    const animatedValue = A.interpolate(baseValue, {
      inputRange,
      outputRange,
      extrapolate: A.Extrapolate.CLAMP,
    });

    acc[name] = animatedValue;

    return acc;
  }, {});
}

if (type === CurrencySelectionTypes.input) {
      headerTitle = 'Swap';
      assets = assetsAvailableOnUniswap;
    } else if (type === CurrencySelectionTypes.output) {
      headerTitle = 'Receive';
    }

    const listItems = filterList(assets, searchQuery, 'uniqueId');

    return (

const isSlippageWarningVisible =
      isSufficientBalance && !!inputAmount && !!outputAmount;
    return (

} else {
        return 0.7;
      }
    });
    const opacityOutputRange = inputRange.map(i => {
      if (index === i) {
        return 1;
      } else {
        return 0.3;
      }
    });

    const translateX = Animated.interpolate(position, {
      inputRange,
      outputRange: translateOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
    const scale = Animated.interpolate(position, {
      inputRange,
      outputRange: scaleOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });
    const opacity = Animated.interpolate(position, {
      inputRange,
      outputRange: opacityOutputRange,
      extrapolate: Animated.Extrapolate.CLAMP,
    });

    return {
      transform: [{ translateX }, { scale }],
      opacity,
    };

render() {
    const { scrollValue } = this.props;
    const headerScale = scrollValue.interpolate({
      inputRange: [-this.props.maxHeight, 0],
      outputRange: [3, 1],
      extrapolate: Animated.Extrapolate.CLAMP,
    });

    let height: ReturnType | number = this.props.maxHeight;

    if (this.props.isForeground && this.props.minHeight) {
      const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
      height = scrollValue.interpolate({
        inputRange: [0, headerScrollDistance],
        outputRange: [this.props.maxHeight, this.props.minHeight],
        extrapolate: Animated.Extrapolate.CLAMP,
      });
    }

    const headerTransformStyle = {
      height,
      transform: !this.props.disableHeaderGrow ? [{ scale: headerScale }] : undefined,