How use for loop inside view in react native

Question

I have vehicle_details array of 2 object given below

vehicle_details: Array(2)
0: {id: 919, requisition_id: 932, vehicle_id: 39, vehicle_no: "TN02K8762", shift: "Double Shift", …}
1: {id: 972, requisition_id: 932, vehicle_id: 234, vehicle_no: "MH12AU1234", shift: "Double Shift", …}

Want to render data. so i need to use for loop in JSX.

<View style={[styles.continer]}>
                        <ScrollView>
                            {this.renderRequisition()}
                            {
                              {
                            vehicle_details.map(x => {
                                this.renderVehicleDetails(x)
                            })
                        }
                            }
                            }
                            {this.renderOwnerDetails()}
                            {this.renderBPRFilesList()}
                            {this.renderRentReqBtn()}
                        </ScrollView>
                    </View>

here is my renderVehicleDetails() function defination

renderVehicleDetails() {
        return (
            <View style={[styles.listShaowContainer]}>
                <View style={[styles.listContainer]}>
                    <View style={[styles.deviderHeaderHorizantal]} />
                    {this.renderVehicleData()}
                    <View style={[styles.deviderHeaderHorizantal]} />
                    <ScrollView
                        showsHorizontalScrollIndicator={false}
                        showsVerticalScrollIndicator={false}
                        contentContainerStyle={{ flexDirection: 'column' }}
                        horizontal={true}>
                      {this.renderVehicleDetailsTableHeader({}, -1)}
                        <View style={[styles.deviderHeaderHorizantal]} />
                        <FlatList
                            data={data}
                            showsVerticalScrollIndicator={false}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={({ index, item }) => {
                                return (
                                    this.renderVehicleDetailsCell(item, index)
                                )
                            }}
                        />
                    </ScrollView>
                </View>
            </View>
        );
    }

here is data

main array:

accountNo: "350601"
approval_by: 0
approval_date: "0001-01-01T00:00:00"
approval_name: "N/A"
approval_status: "Pending"
bankName: " Bank"
branchName: "Kovilpatti"
budgetamt: 115000
current_diesel_rate: 102
diffamt: 115000
ifscCode: ""
isPaymentapplicable: true
month: 10
owner_name: " Kumar"
payment_type: "NEFT"
paymenthistory: []
paymenttype: null
remark: ""
reqNo: ""
requisitionId: 932
requisition_type: "Vehicle Charges Request"
site_id: 62
site_name: "KATTUPALLI"
stateName: "Tamil Nadu"
totalamt: 0
vehicle_details: (2) [{…}, {…}]
vehicleagreementid: 35
year: 2021

and here is vehicle_details array:

accountNo: null
bankName: null
contactNo: null
diesel_consumption_rate: 0
endkmr: 0
hiringfrom: "2021-10-01T05:30:00"
hiringto: "2021-10-31T05:30:00"
hsdScope: "N"
id: 919
ifscCode: null
requisition_id: 932
shift: "Double Shift"
startKmr: 0
vehicleRequisitionEmployees: (25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
vehicle_id: 39
vehicle_no: "02K8762"
vehiclehiringcharges: 55000
vendorCode: null

So i have 2 json array in vehicle_details array please check above json array of index 0 and that array also have nexted array vehicleRequisitionEmployees so i cant use map function .

but its not working getting errors. Thanks in advance.