react-native - React Native ボタンをクリックしたときにコンポーネントを表示する

Question

ファイル popUpDialog.Js で

export default class DialogTester extends Component {
  constructor(props) {
    super(props)

    this.state = {
      dialogVisible: false
   };

  }
  showDialog = () => {
    this.setState({ dialogVisible: true });
  };

  handleCancel = () => {
    this.setState({ dialogVisible: false });
  };

  handleRedefinir = () => {
        this.setState({ dialogVisible: false });
  };
handleEmail = (email) => {
    console.log(email);
}

  render() {
    const {dialogVisible} = this.state;
    return (
      <View>      
        <Dialog.Container visible={this.state.dialogVisible}>
          <Dialog.Title>Redefinir Senha</Dialog.Title>
          <Dialog.Description>
            Digite seu e-mail cadastrado
          </Dialog.Description>
          <Dialog.Input placeholder="E-mail"  onChangeText={(email) => this.handleEmail(email)}
           ></Dialog.Input>
          <Dialog.Button label="Cancelar" onPress={this.handleCancel} />
          <Dialog.Button label="Redefinir" onPress={this.handleRedefinir} />
        </Dialog.Container>
      </View>
    );
  }
}

ここまで大丈夫

ファイルIndex.jsで

import React, { Component } from "react";
import {
  View,
  TextInput,
  Text,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
} from "react-native";
import styles from "./styles";
import PopUp from "../Login/popUpDialog";

export default class Login extends Component {
    render() {
    return (
      <SafeAreaView>                
          <TouchableOpacity
            onPress={() => <PopUp dialogVisible = true /> } //It does not work

            style={styles.redefinirButton}
          >
            <Text style={styles.textRedefinirButton}>Redefinir Senha</Text>
          </TouchableOpacity>

      </SafeAreaView>
    );
  }
}

押したときにdialogVisible = trueにするにはどうすればよいですか? props を試してみましたが、setState が機能しません

onPress から出して変数を true のままにしようとすると、他のすべてが機能しますが、それを false のままにして、ボタンを押したときに true を渡そうとすると、どうにもなりません。