How, when changing the useState variable, to pass the value of this variable to the class component?

Question

React

Hello.
I have a functional component that has a class component and a functional one in the form of a modal.
In the modal, I simply select the time (hours and minutes).
In the class, I call this modal using setModalVisible and also close it.
As a result, I need to transfer the selected data in the modal ( modalHour and modalMinutes ) to the class component, but I don’t understand how to do it correctly, because if I just pass modalHour and modalMinutes , then they will be transferred with a null starting value.

I would really like everything to be in the form of functional components, but I found this component on the Internet and it is extremely difficult to implement, so it is simply not possible to convert it into a functional one.

const [modalVisible, setModalVisible] = useState(false);
  const [modalHour, setModalHour] = useState(null);
  const [modalMinutes, setModalMinutes] = useState(null);

  return (
    <View>
// Классовый компонент
       <BasicUsageDemo daysOfWeek={daysOfWeek} firstDay={firstDay} timeModal={[setModalVisible, setModalHour, modalMinutes, modalHour]} />

// Функциональный компонент( модалка )
      {modalVisible ? (
        <TimePicker 
          setVisible={setModalVisible}
          setHours={setModalHour}
          setMinutes={setModalMinutes}
          hours={modalHour}
        />
      ) : null}
    </View>

Answer 1

Initially, they will be passed as null. Subsequently, when you change the values ​​​​of these variables in the modal, they will change in another component
. And I don’t quite understand why the setModalHour function should be passed to the class component if it only deals with display .... oh well, maybe that’s how it was intended)