On state upadte React native setState method not calling render function

Scenario:: I am trying to make a todo list app using react native, in which I store the input data that is the particular 'todo' in the AsyncStorage.

Now when I try to change the items in the state the render method gets called and the view that is the list gets updated.

But when the mylist is Null that is AsyncStorage is empty I change the status to in the state to Null expecting it render again and show that Hurray !! No todos left!!.

Code Snippet where I update the state:

 if(filtered.length === 0){
      console.log('Before Updating state ',this.state);
      this.setState({
        status :'Null',
        items: [],
        blank : 1,
      })
      console.log('After Updating state ',this.state);

App.js

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  AsyncStorage,
  Alert,
  ScrollView
} from "react-native";
import {
  Appbar,
  IconButton,
  TextInput,
  Button,
  Card,
  List
} from "react-native-paper";
export default class App extends Component {
  async componentDidMount() {
    if (await JSON.parse(await AsyncStorage.getItem("mylist")).length) {
      this.array = await JSON.parse(await AsyncStorage.getItem("mylist"));
      this.setState({
        items: await JSON.parse(await AsyncStorage.getItem("mylist"))
      });
    } else {
      this.setState({
        status: "Null"
      });
    }
    this.id = this.array.length - 1;
  }
  array = [];
  id = 0;
  state = {
    items: [{ id: 0, data: "No todos today!!!" }],
    text: "",
    blank: ""
  };
  handleDelete = async id => {
    const objectarray = await JSON.parse(await AsyncStorage.getItem("mylist"));
    const filtered = objectarray.filter(data => {
      if (data.id === id) {
        return false;
      } else {
        return true;
      }
    });
    // console.log('Filtered array of objects':filtered)
    await AsyncStorage.setItem("mylist", JSON.stringify(filtered));
    this.setState({
      items: await JSON.parse(await AsyncStorage.getItem("mylist"))
    });
    if (filtered.length === 0) {
      console.log("Before Updating state ", this.state);
      this.setState({
        status: "Null",
        items: [],
        blank: 1
      });
      console.log("After Updating state ", this.state);
    }
    this.array = await JSON.parse(await AsyncStorage.getItem("mylist"));
  };
  storedata = async () => {
    // console.log(e.target);
    if (this.state.text !== "") {
      this.id = this.id + 1;
      this.array.push({ id: this.id, data: this.state.text });
      this.setState({
        text: "",
        status: ""
      });
      await AsyncStorage.setItem("mylist", JSON.stringify(this.array));
      this.array = await JSON.parse(await AsyncStorage.getItem("mylist"));
      this.setState({
        items: await JSON.parse(await AsyncStorage.getItem("mylist"))
      });
    } else {
      Alert.alert("Alert", "Field Empty");
    }
  };

  render() {
    var list = this.state.items.map(iterator => {
      console.log("I am in there in the list");
      if (this.state.status !== "Null") {
        console.log("i am in the list if ");
        return (
          <View>
            <Card key={iterator.id} style={{ margin: 10 }}>
              <List.Item
                title={iterator.data}
                left={() => <List.Icon icon="label" />}
                right={() => (
                  <IconButton
                    icon="delete"
                    animated="true"
                    onPress={() => this.handleDelete(iterator.id)}
                  />
                )}
              />
            </Card>
          </View>
        );
      } else {
        console.log("i am in the list else");
        return (
          <View>
            <Card key="Null" style={{ margin: 10 }}>
              <List.Item
                title="Hurray !! No todos left!!"
                left={() => <List.Icon icon="label" />}
              />
            </Card>
          </View>
        );
      }
    });

    return (
      <View style={styles.container}>
        <Appbar.Header>
          <Appbar.Content title="My Todos" subtitle="Todos" />
        </Appbar.Header>
        <View style={{ backgroundColor: "#fff" }}>
          <TextInput
            label="Add Todo"
            mode="outlined"
            value={this.state.text}
            color="white"
            style={{ margin: 30 }}
            onChangeText={text => this.setState({ text: text, blank: "" })}
          />
          <Button
            mode="outlined"
            icon="label"
            onPress={this.storedata}
            style={{ marginLeft: 30, marginRight: 30, marginBottom: 30 }}
          >
            Add Todos
          </Button>
        </View>
        <View style={{ flex: 1 }}>
          <ScrollView>{list}</ScrollView>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#d3d3d3"
  }
});

My console :

I am a beginner to React Native and would appreciate any help and suggestions.
Thanks in advance.