Remove Element from react-swipeable-views after onSwitching

Question

I am using SwipeableViews and mapping elements to be displayed from an array. I want to remove the swiped element from the array each time a user swipes left or right and display new elements without the swiped element. The first element is a card which should never be removed then i map through the array and that's when i want to be able to remove the values that a user has swiped. This is my code so far.

//onswipe function

onSwipe = (e, index) => {
  console.log(index);
  this.setState({ index: 0 });
  this.setState({ likeDislike: '' });
  const currentUserId = this.state.userData.length && this.state.userData[0].id;

  const newUserDataFunction = () => {
    console.log(index);
    const newUserData = this.state.userData;
    if (index >= 1 && this.state.userData.length) {
      newUserData.slice(1);
    }
    return newUserData;
  };
  const newUserData = newUserDataFunction();
  this.setState({ userData: newUserData });
  let nextValue = 0;
  nextValue = e;
 if (nextValue > this.state.current) {
   console.log('Disliked');
    this.setState({ current: nextValue });
  } else {
   console.log('Liked');
    this.setState({ current: nextValue });
  }
  this.setState({ firstItem: 'SWIPE RIGHT TO CONTINUE' });
  this.setState({ index: 0 });
};

return

<SwipeableViews style={{ maxHeight: '100%' }} enableMouseEvents onChangeIndex={this.onSwipe} onSwitching={this.onUserSwitch} index={index}>
    <Card>
        <h1>Swipe Right To Begin</h1>      
    </Card>
    {userData.map(user => (
      <div key={user.id}>
        <Header>
          <span style={{ color: 'red' }}>
            {user.username}
          </span>
        </Header>        
      </div>
    ))}    
  </SwipeableViews>;

currently