Mobx store do not update with observer

Question

I have a simple react native app with two screens. First screen is the list, where you see your selected groups, and you can remove them, by clicking on trash icon:

export const Settings: NavioScreen = observer(({ }) => {
...
    return (
      <View flex bg-bgColor padding-20>
        <FlashList
            contentInsetAdjustmentBehavior="always"
            data={toJS(ui.savedGroups)}
            renderItem={({item}) => <ListItem item={item} />}
            estimatedItemSize={20}
        />
      </View>
  );
});


};
const ListItem = ({item}: any) => {
    const { ui } = useStores();

    return (
      <View>
          <Text textColor style={{ fontWeight: 'bold', fontSize: 15 }}>{item.name}</Text>
          <TouchableOpacity onPress={() => ui.deleteGroup(item)}>
            <Icon name={'trash'}/>
          </TouchableOpacity>
      </View>
  );
};

The second screen is also the list, where you can add and remove the subjects from the list:

export const Playground: NavioScreen = observer(() => {
 ...

    const groupsToShow =
        ui.search && ui.search.length > 0
            ? ui.groups.filter((p) =>
                p.name.toLowerCase().includes(ui.search.toLowerCase())
            )
            : ui.groups;

  return (
      <View >
          <FlashList
              data={toJS(groupsToShow)}
              renderItem={({item}) => <ListItem item={item} />}
          />
      </View>
  );
});


const ListItem = ({item}: any) => {
    const { ui } = useStores();

    return (
        <View>
            <Text textColor style={{ fontWeight: 'bold', fontSize: 15 }}>{item.name}</Text>         
            <View>
                <If
                    _={ui.isGroupSaved(item)}
                    _then={
                        <TouchableOpacity onPress={(e) => {ui.deleteGroup(item)}}>
                            <AntDesign name="heart" size={20} color={Colors.primary} />
                        </TouchableOpacity>
                    }
                    _else={
                    <TouchableOpacity onPress={(e) => {ui.addGroup(item)}}>
                        <AntDesign name="hearto" size={20} color={Colors.primary} />
                    </TouchableOpacity>
                    }
                />
            </View>
        </View>
    );
};

And now when I remove the group from the first list, the heart icon do not update on the second list. But it should, because there is an if statement on second list, that checks if the group is saved. And if it is not, the heart should have the name="hearto" I have tried to use the state instead mobx library but it does not also help.

Here is my store written with mobx:

export class UIStore implements IStore {
  savedGroups = [];


  constructor() {
    makeAutoObservable(this);

    makePersistable(this, {
      name: UIStore.name,
      properties: ['savedGroups'],
    });
  }

  addGroup = (group: any) => {
    if (true === this.isGroupSaved(group)) {
      return;
    }
    this.savedGroups.push(group);
  }

  isGroupSaved = (group: any) => {
    return -1 !== this.savedGroups.findIndex(g => g.id === group.id);
  }

  deleteGroup = (groupToDelete: any) => {
    this.savedGroups = this.savedGroups.filter((group) => group.id !== groupToDelete.id);
  }
}