How to Make Drag and Drop Quiz in React Native?

hopefully we are all in good health wherever we are. I have a problem when I want to create a Quiz with Drag and Drop type in React Native. I'm using the react-native-drax library. The data I use comes from firebase, if it is described as follows :

[{
    quest: "Book ?",
    options: ["Yes","No"],
    correct_option: "Yes",
    type:'yesorno',
    image:'urlofimages'
},
{
    quest: "Fill the following words  \n F_ _t Train M_ _ ern",
    options: ["as","od","am"],
    correct_option: ["as","od"],
    type:'drag',
    image:''
}]

(all quiz data is accommodated in the variable allData).

then I made the following components, to create a drag and drop area. I made it dynamic. Dropzone corresponds to the number of correct_option and TouchDrag corresponds to the number of options (taken from data).

import { DraxProvider, DraxView, DraxList } from 'react-native-drax';
....
.....
.......
const Exam = () => {
  const [showAnwOne, setAnwOne] = useState([]);
  const [showAnwTwo, setAnwTwo] = useState([]);
...
.....
.......
 
  const Draxzone= ({item,index}) =>{
    return(
      <View style={{flexDirection:'row', justifyContent:'space-around', width:'100%', marginBottom:20}}>
          <DraxView
              style={styles.receiver}
              key={item}
              receivingStyle={styles.receiving}
              onReceiveDragDrop={(event) => {
                  let selected_item = event.dragged.payload;
                  setAnwOne(selected_item)
              }}

          >
            <Text>{showAnwOne}</Text>
        </DraxView>
      </View>
    )
  }

  const TouchDrag = ({item,index})=>{
    return(
            <DraxView
                style={styles.draggable}
                draggingStyle={styles.dragging}
                dragReleasedStyle={styles.dragging}
                hoverDraggingStyle={styles.hoverDragging}
                dragPayload={index}
                longPressDelay={0}
                key={item}
            >
                <Text style={{color:'#FFF'}}>{item}</Text>
            </DraxView>
    )
  }

after that I display the component as follows: (quiz is displayed based on its type)

{allData[currentIndex]?.type === 'drag' ?
    <DraxProvider>
       <View style={{width:'100%'}}>
          <View style={{flexDirection:'row', justifyContent:'space-around', width:'100%', marginBottom:20}}>
             {allData[currentIndex]?.correct_option.map((item, index) => Draxzone({ item, index }))}
          </View>
       </View>
       <View style={{flexDirection:'row', justifyContent:'space-around', width:'100%', marginBottom:20}}>
           <DraxList
              data={allData[currentIndex]?.options}
              renderItemContent={TouchDrag}
              keyExtractor={(item, index) => item.toString()}
              numColumns={3}
              ItemSeparatorComponent={FlatListItemSeparator}
              scrollEnabled={true}
           />
       </View>
    </DraxProvider>
 : <Text>Sorry This Qustion not have type</Text> }

the result is executed as follows: I tried to drag and drop components, the results are like in steps 2 and 3

while the result I want is as follows: Text on Dropzone follows text on TouchDrag

after that, I'm also confused to validate the correct answer in the order in correct_option. not like a quiz that only uses options from A to E for example. Honestly this is new to me, and I've been looking for quiz reference resources that use drag and drop in React Native, but I haven't found any results.

if there is something easier to understand, I ask for guidance. I hope that some of my friends here can help with this problem, thank you for your attention and time.