Reactnative map function does not render view

I have the following screen :-

import React, { useEffect, useState } from "react";
import { View, StyleSheet, ScrollView, Text } from "react-native";
import Header from "../components/Header";
import PageTitle from "../components/PageTitle";
import BottomLine from "../components/svg/BottomLine";
import Button from "../components/Button";
import SelectDropdown from "react-native-select-dropdown";
import { User } from "../services/User";


const Users = ({ navigation }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState();
  const [roles, setRoles] = useState();
  const [selectedRole, setSelectedRole] = useState("مراقب");

  useEffect(() => {
    User.getAll().then((res) => {
      setData(res.data);
      let apiRoles = [];
      res.data.forEach((row) => {
        apiRoles.push(row.name);
      });
      setRoles(apiRoles);
      setIsLoading(false);
    });
  }, []);

  console.log("data", data);
  return (
    <View style={styles.container}>
      <Header style={{ alignSelf: "center" }} />

      <ScrollView style={{ marginRight: 13, marginLeft: 13 }}>
        <PageTitle>المستخدمون</PageTitle>
        <BottomLine />
        <View style={{ display: "flex", flexDirection: "row" }}>
          <SelectDropdown
            buttonStyle={{
              alignSelf: "center",
              width: "80%",
              marginBottom: 12,
              borderWidth: 1,
              height: 40,
            }}
            data={!isLoading && roles}
            defaultButtonText="الصلاحية"
            //onSelect={onChange}
            buttonTextAfterSelection={(selectedItem, index) => {
              // text represented after item is selected
              // if data array is an array of objects then return selectedItem.property to render after item is selected
              return selectedItem;
            }}
            rowTextForSelection={(item, index) => {
              // text represented for each item in dropdown
              // if data array is an array of objects then return item.property to represent item in dropdown
              return item;
            }}
          />
          <Button
            onPress={() => navigation.navigate("NewUser")}
            style={{ marginLeft: "auto", marginTop: 0, height: 40 }}
          >
            + اضافه
          </Button>
        </View>

        {isLoading && (
          
            <Text
              style={{
                alignSelf: "center",
                marginTop: 55,
                color: "#ecebeb",
              }}
            >
             Loading...
            </Text>
            
        )}
      </ScrollView>
      {!isLoading &&
        data.map((r) => {
          console.log("r.users", r.users);
          r.users.map((user, i) => {
            console.log("user.first_name", user.first_name);
            return <Text style={{ color: "black" }}>Test Text</Text>;
          });
        })}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});
export default Users;

The map function on above code should render a text, but nothing showing:-

    r.users.map((user, i) => {
                console.log("user.first_name", user.first_name);
                return <Text style={{ color: "black" }}>Test Text</Text>;
          });

Output screen:-

Log:-