React: Can we pass 2 forms from 2 different child components to a parent, and submit them with a button which is inside the parent component?

I am trying to somehow pass the data from 2 forms and 2 different components to the parent component and then somehow console.log all of this data with a button that is inside the parent component. Then I will simply send these data to a JSON file or a dummy database.

When I press the submit button of course nothing is triggered right now because I simply don’t know how to pass the function from the children to the parent. I have tried many ways, but I would appreciate it if you could show me a way to lift the state and combine the forms.
For the input, in order to pass refs, I have used React.forwardRef()

It would be easy to just have 1 big component with 1 form and then the button inside this component, but since it is a fun project, I want to learn how to implement this functionality in case I will use it in the future. You can find a screenshot on this link:

[]
[1]: https://i.stack.imgur.com/myV0N.jpg

Here we go:

1. Parent component

const BookingComponent = () => {
  return (
    <div>
      <CRContainer className="booking-crcontainer">
        <CRColumn>
          <PickUpCarComponent />
        </CRColumn>
        <CRColumn>
          <CustomerInfo />
        </CRColumn>
      </CRContainer>
      <CRContainer className="booking">
        <Button type="submit" btnText="hello there" />
      </CRContainer>
    </div>
  );
};

export default BookingComponent;

2. Child 1

const CustomerInfo = (props) => {
  const firstlRef = useRef();
  const lastNameRef = useRef();

  const onTrigger = (e) => {
    e.preventDefault();
    //console.log(first1Ref.current.value)
    console.log("heaheaheah");
  };

  return (
    <>
      <Subtitle stitle={SubtitleLabels.customerInfo} />
      <div className="customer-info-container">
        <form onSubmit={onTrigger}>
          <div>
            <LabeledInput
              labelText={CustomerInfoLabels.firstName}
              type="text"
              inputPlaceholder={GeneralLabels.placeholder}
              ref={firstlRef}
            ></LabeledInput>
            <LabeledInput
              labelText={CustomerInfoLabels.lastName}
              type="text"
              inputPlaceholder={GeneralLabels.placeholder}
              ref={lastNameRef}
            ></LabeledInput>
          </div> ...................

3. Child 2

Haven’t put the refs here yet.

const PickUpCarComponent = () => {
  return (
    <div>
      <Subtitle stitle={SubtitleLabels.pickUp} />
      <form>
      <div className="booking-inner-container">
        <div>
          <LabeledInput labelText={"Pick-up date*"} type="date"></LabeledInput>
          <LabeledInput labelText={"Pick-up time*"} type="time"></LabeledInput>
        </div>
        <DropDown type="CarGroup" labeltext="Car Group*" attribute="name" />
        <DropDown type="RentalOffice" labeltext="Region*" attribute="region" />
      </div>
     </form>
    </div>
  );
};

export default PickUpCarComponent;

4. Input Component

const LabeledInput = React.forwardRef((props, ref) => {
  const { labelText, type, inputPlaceholder, onChange, className } = props;

  return (
    <div className={`input-container ${className}`}>
      <label htmlFor="labelText">{labelText}</label>
      <input
        type={type}
        placeholder={inputPlaceholder}
        onChange={onChange}
        ref={ref}
      />
    </div>
  );
});

export default LabeledInput;