ReactNativeで、keyに応じたComponentの出し分けが出来ません><

前提・実現したいこと

reactNativeを使って、ネイティブアプリを作ろうとしています。
ユーザーにいくつか質問をして、回答の内容に応じて次の質問の遷移し、最終的には回答内容に応じたコンテンツが出るアプリです。
useStateでkeyを設定し、keyの番号によって出すページ（QuestionsContainer か　ContentsContainerか）を出し分けようとしています。

発生している問題・エラーメッセージ

keyが５００以上になった場合には、ContentsContainer（テキストが４つあり、最後にボタンが１つある形式）を表示するようにしているのですが、QuestionsContainer（テキストが１つあり、ボタンがいくつかある形式）で出てしまいます。
画面上でkeyは正しく表示されています。
どのように修正するのが良いでしょうか？

該当のソースコード

import React,{useState} from 'react';
import { StyleSheet, Text, View,Button } from 'react-native';

export default function App() {
  const [key,setKey] = useState(0);

  const QuestionsContainer = ()=>{
    const CurrentQuestions = Questions.find(({id})=> id === key);
    return(
      <View style={styles.container}>
        {CurrentQuestions.Question ? <Text>{CurrentQuestions.Question}</Text> : null}
        {CurrentQuestions.content2 ? <Button title={CurrentQuestions.content1} onPress={()=> setKey(CurrentQuestions.key1)}></Button> : null}
        {CurrentQuestions.content2 ? <Button title={CurrentQuestions.content2} onPress={()=> setKey(CurrentQuestions.key2)}></Button> : null}
        {CurrentQuestions.content3 ? <Button title={CurrentQuestions.content3} onPress={()=> setKey(CurrentQuestions.key3)}></Button> : null}
        {CurrentQuestions.content4 ? <Button title={CurrentQuestions.content4} onPress={()=> setKey(CurrentQuestions.key4)}></Button> : null}
        {CurrentQuestions.content5 ? <Button title={CurrentQuestions.content5} onPress={()=> setKey(CurrentQuestions.key5)}></Button> : null}
        {CurrentQuestions.content6 ? <Button title={CurrentQuestions.content6} onPress={()=> setKey(CurrentQuestions.key6)}></Button> : null}
        {CurrentQuestions.content7 ? <Button title={CurrentQuestions.content7} onPress={()=> setKey(CurrentQuestions.key7)}></Button> : null}
        {CurrentQuestions.content8 ? <Button title={CurrentQuestions.content8} onPress={()=> setKey(CurrentQuestions.key8)}></Button> : null}
        {CurrentQuestions.content9 ? <Button title={CurrentQuestions.content9} onPress={()=> setKey(CurrentQuestions.key9)}></Button> : null}
        {CurrentQuestions.content10 ? <Button title={CurrentQuestions.content10} onPress={()=> setKey(CurrentQuestions.key10)}></Button> : null}
        <Text>{key}</Text>
      </View>
    )
  }

  const ContentsContainer = () => {
    const CurrentContents = Contents.find(({id})=> id === key);
    return (
      　　<View style={styles.container}>
         　{CurrentContents.content1 ? <Text>{CurrentContents.content1}</Text> : null}
         　{CurrentContents.content2 ? <Text>{CurrentContents.content2}</Text> : null}
         　{CurrentContents.content3 ? <Text>{CurrentContents.content3}</Text> : null}
         　{CurrentContents.content4 ? <Text>{CurrentContents.content4}</Text> : null}
         　{CurrentContents.content5 ? <Button title={CurrentContents.content5} onPress={()=> setKey(CurrentContents.key1)}></Button> : null}
         <Text>{key}</Text>
         </View>
      );
  }

  if(key === 0) return(
    <View style={styles.container}>
      <Text>利用規約</Text>
      <Text>本文</Text>
      <Button title='アプリを始める' onPress={()=> setKey(1)}></Button>
    </View>
  );
  else if(0 < key < 500) return (
    <QuestionsContainer/>
  );
  else if(499 < key)return (
    <ContentsContainer />
  );
  else return(
    <View style={styles.container}>
      <Text>申し訳ありません。始めから選び直して下さい。</Text>
      <Button title='始めに戻る' onPress={()=> setKey(1)}></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const Questions = [
  {id:1,Question:'該当するものを選んでください',key1:2,content1:'足が痛い',content2:'頭が痛い',key2:3,content3:'喉が痛い',key3:4,content4:'3つ目の回答です',key4:5,content5:'4つ目の回答です',key5:6},
  {id:2,Question:'質問です',content1:'１つ目の回答です',key1:3,content2:'2つ目の回答です',key2:3,content3:'2つ目の回答です',key3:3,content4:'3つ目の回答です',key4:3,content5:'4つ目の回答です',key5:3},
  {id:3,Question:'質問です2',content1:'１つ目の回答です',key1:4,content2:'2つ目の回答です',key2:3,content3:'2つ目の回答です',key3:3,content4:'3つ目の回答です',key4:3,content5:'4つ目の回答です',key5:3},
  {id:4,Question:'質問です3',content1:'１つ目の回答です',key1:5,content2:'2つ目の回答です',key2:3,content3:'2つ目の回答です',key3:3,content4:'3つ目の回答です',key4:3,content5:'4つ目の回答です',key5:3},
  {id:5,Question:'質問です4',content1:'１つ目の回答です',key1:6,content2:'2つ目の回答です',key2:3,content3:'2つ目の回答です',key3:3,content4:'3つ目の回答です',key4:3,content5:'4つ目の回答です',key5:3},
  {id:6,Question:'質問です5',content1:'１つ目の回答です',key1:500,content2:'2つ目の回答です',key2:3,content3:'2つ目の回答です',key3:3,content4:'3つ目の回答です',key4:3}
];

const Contents = [
　{id:500,content1:'あなたが選んだ回答',content2:'１つ目の回答',content3:'２つ目の質問',content4:'２つ目の回答',content5:'３つ目の質問',key1:501},
  {id:501,content1:'オススメの行動',content2:'コンテンツ２',content3:'コンテンツ３',content4:'コンテンツ４',content5:'選択画面に戻る'}
];