Include state in a component instance (React Native)

Question

I have the following problem trying to change the state of my Modalchat component:

ExceptionsManager.js:82 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the ModalChatHorus component

Way I’m instilling the component to open in other app locations:

import ModalChat from '../components/modalChat';

const modalChat = new ModalChat();

return {
      accessibilityLabel: 'Modal chat',
      onPress: () => modalChat.openModal(),
};

By what I researched the above mentioned error problem is due me is instantiating the component and not React, causing the object state does not exist.

How can I make it so I can add values within that instance?

Ex:

modalChat.state = { title: 'Bla' }

modalChat.js

    export default class ModalChat extends Component {
      constructor(props) {
        super(props);


        this.state = {
          title: '',
          showList: true,
          listAttendance: [
            {
              key: '1',
              icon: 'user-group',
              title: 'Agência',
              subtitle: 'Atendimento em geral',
            }
          ],
        };
      }

    validateAction(title) {
    return title === 'Atendimento' ? this.setState({ title: 'Fale com', showList: true }, this.updateModal()) : () => this.closeModal();
  }

      openModal() {
        this.modal = Modal.showModal(this.render(), { onClose: () => this.closeModal, position: 'top' });
      }

      updateModal() {
        Modal.updateModal(this.render(), { position: 'top' });
      }

      closeModal() {
        Modal.closeModal(this.modal);
      }

      renderHeader() {
        const { title } = this.state;

        return (
          <View style={styles.header}>
            <Touchable style={styles.headerTitle} onPress={() => this.validateAction(title)}>
              <Icon name="chevron-down" size={25} />
              <Text style={styles.title}>{title}</BBText>
            </Touchable>

            <Touchable style={styles.iconTel} onPress={() => {}}>
              <Icon selected name="telephone-circle" size={25} />
            </Touchable>
          </View>
        );
      }

      renderContent() {
        return <ContentChat />;
      }

      render() {
        const { listAttendance, showList } = this.state;

        return (
          <View style={styles.container}>
            {this.renderHeader()}

            {showList ? (
              <FlatList
                data={listAttendance}
                renderItem={({ item }) => (
                  <Touchable
                    onPress={() => {
                      this.setState(
                        {
                          title: 'Atendimento',
                          showList: false,
                        },
                        () => this.updateModal(),
                      );
                    }}
                  >
                    <ListAttendance attendance={item} />
                  </Touchable>
                )}
                keyExtractor={item => item.key}
              />
            ) : (
              <ContentChat />
            )}
          </View>
        );
      }
    }