infinite rendering of axios request inside a useEffect

const { profile, setProfile } = useContext(ProfileContext);
const [hasChange, setHasChange] = useState(null);
const [photo, setPhoto] = useState(null);

useEffect(() => {
  (async () => {
    try {
      const { data } = await axios.get(
        'https://qr-queue.com/api/customer/get/' + user.customer_id,
        {
          headers: {
            Authorization: user.token,
            'Content-Type': 'application/json',
          },
        }
      );
      getProfile(data);
    } catch (e) {
      console.log(e);
    }
  })();
}, []);

function getProfile(result) {
  try {
    console.log(result.data.image); //<--- this gets triggered continously
    setPhoto(result.data.image);
    let wholeArray = [];
    wholeArray.push(result.data);
    setProfile(wholeArray);
  } catch (e) {
    console.log(e);
  }
}

function renderContent(itemData, onPressHandler) {
  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      <Image
        source={require('../assets/images/banner-ads1.png')}
        style={{ width: Dimensions.get('window').width, height: 110 }}
      ></Image>
      <TouchableOpacity style={styles.roundButton}>
        <Icon name={'pencil'} size={45} color={'#FFF'} />
      </TouchableOpacity>

      <Image
        source={{ uri: itemData.item.image }}
        style={styles.avatar}
      ></Image>
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          marginBottom: 20,
        }}
      >
        <Pressable
          style={{ backgroundColor: 'transparent' }}
          onPress={() => takePhotoAndUpload()}
        >
          <Text style={{ color: '#967BFF', fontWeight: '500', fontSize: 17 }}>
            Edit Picture
          </Text>
        </Pressable>
      </View>
      <Text style={styles.infoContainer}>
        {itemData.item.firstname} {itemData.item.lastname}
      </Text>
      <Text style={styles.infoContainer}>{itemData.item.email}</Text>
    </View>
  );
}

const ProfileViewComponent = (
  <FlatList
    data={profile}
    keyExtractor={(item) => item.ID}
    renderItem={renderContent}
  ></FlatList>
);

return (
  <SafeAreaView style={styles.container}>
    <ImageBackground
      source={require('../assets/images/artboard2.png')}
      resizeMode='cover'
      style={styles.bgImage}
    >
      <View style={{ flex: 1 }}>
        <FlatList
          contentContainerStyle={{ flexGrow: 1 }}
          ListFooterComponent={ProfileViewComponent}
        ></FlatList>
      </View>
    </ImageBackground>
  </SafeAreaView>
);