The common example of modal usually goes like this:

import * as React from 'react';
import { Modal, Portal, Text, Button, Provider } from 'react-native-paper';

const MyComponent = () => {
  const [visible, setVisible] = React.useState(false);

  const showModal = () => setVisible(true);
  const hideModal = () => setVisible(false);
  const containerStyle = {backgroundColor: 'white', padding: 20};

  return (
    <Provider>
      <Portal>
        <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
          <Text>Example Modal.  Click outside this area to dismiss.</Text>
        </Modal>
      </Portal>
      <Button style={{marginTop: 30}} onPress={showModal}>
        Show
      </Button>
    </Provider>
  );
};

export default MyComponent;

My question is. Why is this the recommended usage instead of just unmounting the component when is not needed anymore? Something like this:

    visible && (<Modal visible={true} onDismiss={hideModal} contentContainerStyle={containerStyle}>
      <Text>Example Modal.  Click outside this area to dismiss.</Text>
    </Modal>)

Is there any pro or cons of doing it one way or another? Is there a particular or good reason I have to do it in the first("official") way?