How to have all component logic inside of it and export it to parent components

Question

I have a modal component that is being used to display a form for the user. This modal accepts three parameters: is_visible (if the modal is shown), toggleModal (state function for managing ifthe modal will show or not), passport_id (irrelevant here). This component is used inside another component, the passport component bellow. This passport component is where the state that manages the visibility of modal is created, and then, as said above, the state function and state variable are passed down to the modal (child component).

This works fine, but it seems wrong to have part of the functionality of the modal defined on its parent. I believe that the state that controls wether the modal will show or not should be defined inside the modal component and then, if it's necessary to use these functions ouside the modal, they should be exported. I've tried this by defining a hook inside the modal and exporting to the passport component, but it didn't work because the state variable inside the modal was not updating.

So my question is if there's a proper way to apply the idea of "Tell, don't ask" (https://martinfowler.com/bliki/TellDontAsk.html) here, making it possible to tell the component to do something instead of passing down data. Or, in other words, put the logic of the modal only inside the modal component

Modal component:

const TransferPassportModal = ({is_visible, toggleModal, passport_id}) => {
  const [input_text, setInputText] = useState(''),
    [loading, setLoading] = useState(false);

  function closeModal() {
    toggleModal(false);
  }

  return (
    <Modal animationType="fade" transparent={true} visible={is_visible}>
      <View style={styles.modal}>
        <View style={styles.modal_content}>
          <TouchableOpacity
            onPress={closeModal}
            style={styles.close_modal_button}>
            <Icons name="close" size={20} />
          </TouchableOpacity>
          // Rest of code
        </View>
      </View>
    </Modal>
  );
};

export default TransferPassportModal;

Passport component:

 const Passport = ({passport}) => {
  const [toggleModal, setToggleModal] = useState(false);

  function openModal() {
    setToggleModal(!toggleModal);
  }

  return (
    <View style={styles.wrapper}>
      <View style={styles.infos_wrapper}>
        <Text style={styles.name}>{passport.nome}</Text>
        <Text style={styles.text}>{passport.codigo}</Text>
      </View>
      <View style={styles.buttons_wrapper}>
        // Resto of code
        <TransferPassportModal
          is_visible={toggleModal}
          passport_id={passport.ingresso}
          toggleModal={setToggleModal}
        />
      </View>
    </View>
  );
};

export default Passport;

Answer 1

I lately do this like so:

export const OpenModalAction = () =>{
  return (
     <>
        <Button/>
        <Modal> …. <Modal/>
     </>
  )
}

So the button and modal is one component