title: React Native Snap Carousel Functional Component Issue
body: <p>I'm using this snack as a template for implementing my own carousel component. This template is using Class Component and I converted it to a Functional component</p>
  <p><a href="https://snack.expo.io/@bd-arc/react-native-snap-carousel-%7C-example-with-custom-interpolations" rel="nofollow noreferrer">https://snack.expo.io/@bd-arc/react-native-snap-carousel-%7C-example-with-custom-interpolations</a></p>
  <p>I added this to my project and I believe some error is happening when rendering the Carousel but I'm unable to tell. It renders - but not all the components are rendering. I have only changed the Carousel itself to a function component. The problem is the  is not showing below the Carousel - also if I add multiple VideoCarousel's, only the first one displays.</p>
  <p>My code is below</p>
  <p>App.js</p>
  <pre><code>import React from 'react';
  import { View } from 'react-native';
  
  import Header from './components/header';
  import VideoCarousel from './components/videoCarousel';
  
  import tailwind from 'tailwind-rn';
  
  const App = () =&gt; {
    return (
      &lt;View style={tailwind('flex pt-12 items-center bg-gray-300 h-full')}&gt;
        &lt;Header /&gt;
        &lt;VideoCarousel /&gt;
        &lt;VideoCarousel /&gt;
      &lt;/View&gt;
    )
  };
  
  export default App;
  </code></pre>
  <p>VideoCarousel.js</p>
  <pre><code>import React, { useState } from 'react';
  import { Text, View, Dimensions, StyleSheet, Alert } from 'react-native';
  
  import Carousel from 'react-native-snap-carousel'; // Version can be specified in package.json
  
  import { scrollInterpolator, animatedStyles } from './../utils/animations';
  
  const SLIDER_WIDTH = Dimensions.get('window').width;
  const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.7);
  const ITEM_HEIGHT = Math.round(ITEM_WIDTH * 3 / 4);
  
  const DATA = [];
  for (let i = 0; i &lt; 10; i++) {
    DATA.push(i)
  }
  
  const VideoCarousel = () =&gt; {
  
    const [index, setIndex] = useState(0);
  
    _renderItem = (index) =&gt; {
      return (
        &lt;View style={styles.itemContainer}&gt;
          &lt;Text style={styles.itemLabel}&gt;{`Item ${index.index}`}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  
    return (
      &lt;View&gt;
        &lt;Carousel
          data={DATA}
          renderItem={this._renderItem}
          sliderWidth={SLIDER_WIDTH}
          itemWidth={ITEM_WIDTH}
          containerCustomStyle={styles.carouselContainer}
          inactiveSlideShift={0}
          onSnapToItem={(index) =&gt; setIndex(index)}
          scrollInterpolator={scrollInterpolator}
          slideInterpolatedStyle={animatedStyles}
          useScrollView={true}          
        /&gt;
        &lt;Text style={styles.counter}&gt;
          Test
        &lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    carouselContainer: {
      marginTop: 50
    },
    itemContainer: {
      width: ITEM_WIDTH,
      height: ITEM_HEIGHT,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'dodgerblue'
    },
    itemLabel: {
      color: 'white',
      fontSize: 24
    },
    counter: {
      marginTop: 400,
      fontSize: 30,
      fontWeight: 'bold',
      textAlign: 'center',
      backgroundColor: &quot;black&quot;,
    }
  });
  
  export default VideoCarousel;
  </code></pre>