كيف أحدث قائمة الحصص في صفحة خاصة

أريد أن أضيف الحصص في صفحة خاصة بهم حيث كل مرة أضيف حصة تظهر في قائمة الحصص  

كود إضافة الحصة 

import React ,{useState, Component,useEffect} from 'react';
import {View,Text,StyleSheet,ScrollView,KeyboardAvoidingView,TextInput,TouchableOpacity} from 'react-native';
import List from './compononts/list';
import Loader from './compononts/Loader';
import Inbut from './compononts/Inbut';
import { Entypo } from '@expo/vector-icons';
import ScreenTitle from './compononts/ScreenTitle';
import Button from './compononts/Button';
import axios from '../config/axios'
import { CREATEROOM_URL } from '../config/urls';

import QRCode from "react-qr-code";

let _QRcode = "";
 
function AddRoom(){  
  const [Lists ,setList]=useState([]);
  const [formData, setFormData]=useState({
    NameOfroom:'',
    Numberofroom: '',
    date:'',
    QrCodevalue:''
    });

    const changeFormValue=(key,value)=>{
      setFormData({...formData,[key]:value});
      
  }
  

   

  const [refresh, setRefresh] = useState(0);
 
  const _singpRoom=()=>{
    
    (async()=>{
      const { Numberofroom, NameOfroom, date, QrCodevalue}=formData;
      const QrCode=QrCodevalue;
      const body={
        Numberofroom,
        NameOfroom,
            date,
            QrCode
      }
    
     
          try{
             const response=   axios.post(CREATEROOM_URL,body);   
             console.log(body);
             setFormData({
              NameOfroom:'',
                Numberofroom:'',
                date:'',
                QrCode:''
               
             });
    const List ={
              id: new Date(),
              NameOfroom:NameOfroom,
              Numberofroom: Numberofroom,
              date: date
            }
               const updateList =[...Lists,List];
            setList(updateList);
             props.navigation.navigate('ListRoom');
          }catch(e){
           
            
          }

  })();
  }
 
  
  const { NameOfroom, NumberOfroom, date, QrCodevalue } = formData;
  return(
  <ScrollView  contentContainerStyle={{paddingVertical:20}} >
        
          <View style={styles.container}>
           <View style={styles.titlescreen}>
           <ScreenTitle title="أضف حصة " ></ScreenTitle>           
         <Entypo name="add-to-list" size={70} color="black" style={styles.icontitle} />
           </View>      
          </View>
          <KeyboardAvoidingView   behavior='padding' enabled>
            <View  style={styles.styInbut}>

            <Inbut
          placeholder="إسم الحصة " 
         value={formData.NameOfroom} 
         onChangeText={(text)=>changeFormValue('NameOfroom',text)}
         />
         <Inbut
          placeholder="رقم الحصة " 
         value={formData.Numberofroom} 
         onChangeText={(text)=>changeFormValue('Numberofroom',text)}
         />
          <Inbut
          placeholder="تاريخ الحصة " 
         value={formData.date} 
         onChangeText={(text)=>changeFormValue('date',text)}
         />
       
              <View style={styles.Qrcodestyl}>
               <TextInput
                style={styles.TextInputStyle}
                value={formData.QrCodevalue }
                onChangeText={(text) => changeFormValue('QrCodevalue',text)}
                underlineColorAndroid = "transparent" 
                placeholder="أدخل كود الحصة  "
              />
              <TouchableOpacity  onPress={() => {
                _QRcode = QrCodevalue;
                setRefresh(refresh + 1);
              }} activeOpacity={0.7} style={styles.button} >
        
              <Text style={styles.TextStyle}> أنشئ </Text>
      
              </TouchableOpacity>

               <QRCode value={ _QRcode}
                 size={250}
                bgColor='#000'
                fgColor='#fff'
               />
              </View>
              <Button text="حفظ"
              buttonStyle={styles.butt}
              onPress={_singpRoom}
              ></Button>
            </View>
          </KeyboardAvoidingView>
           
  </ScrollView>
  )
};

const styles=StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'

    },
    titlescreen:{
position:'relative',
top:-40
    },
    icontitle:{
      position:'relative',
      right:-25,
      top:-20
    },
    styInbut:{
  position:'relative',
  left:45,
  top:-40
    },
    textcont:{
    fontSize:25,
    position:'relative',
    left:90,
    bottom:-5,
    },
    Qrcodestyl:{
      position:'relative',
      left:50
    },
    TextInputStyle:{
      position:'relative',
      left:-60,
      width: '80%',
    height: 50,
    borderRadius: 10,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: 'blue',
    textAlign: 'center'
    },
    button: {
     position:'relative',
     right:60,
     height:50,
     width: '80%',
      paddingTop:8,
      paddingBottom:8,
      backgroundColor: '#009688',
      borderRadius:7,
      marginBottom: 20
    },
    TextStyle:{
      color:'#fff',
      textAlign:'center',
      fontSize: 18
  },
  butt:{
    position:'relative',
    left:80,
    width:150,
    borderRadius:10
  }
})

export default AddRoom;

كود عرض الحصص 

import React from 'react';
import {View,Text,StyleSheet,TouchableOpacity} from 'react-native';
import List from './compononts/list';

function ListRoom(){
return(

<View style={stayles.container}>
  <TouchableOpacity>
<List 
text="إسم الحصة "
date='20-5-2022'
number='1'
></List>
  </TouchableOpacity>
</View>







)
};

const stayles=StyleSheet.create({
container:{
flex:1,
backgroundColor:'#E8EAED',
}



})


export default ListRoom;

حاولت أن أصدر القائمة المحدثة للحصص ومن ثم أستوردها في صفحة الحصص لكن لم أنجح في ذلك 

كيف أفعل ذلك ؟