Open a model box when clicking header right button in react navigation stack

This is the app.js stack screen element

<Stack.Screen name="Home" component={HomeScreen} options={
          { headerTitleStyle: { alignSelf: 'center' },
          headerRight: () => (
            <Button
              onPress={this.add}
              title="+"
              
            />
          )
        }
        }/>

Add function in app.js

add = async () => {
  this.setState({
    isVisible: true
  })
 }

Modal is present in homeScreen component

<Modal visible={this.state.isVisible} animationType={"slide"}
               onRequestClose={() => {this.props.isVisible=false} }>

Whenever the app is loading, it's going to the modal page. It's not rendering homescreen view.