Passage de props entre composants

Bonjour,

Dans une application React je cherche à transmettre des props entre mes composants pour mettre à jour mon state qui est géré par le composant parent.
Je transmet une fonction en props à un composant qui lui même le transmet à un autre composant.

Voici ce que j'ai dans mon composant parent. Quand je coche une de mes options, itemId est "undefined" puis prends une valeur. Je pense que c'est dû au rendu des composants qui se fait après l'appel de la fonction handleChooseCardAdditionalOption() mais je vois pas comment faite autrement.

<CardType 
    handleChooseCardAdditionalOption={ this.handleChooseCardAdditionalOption }
    myItems={this.state.zeOrder.items}
/>

handleChooseCardAdditionalOption = (checked, index, itemId, cardTypeId) => {
        console.log(itemId)
}

Voici mon composant "CardType". Je fais un .map() sur mes items et j'affiche pour chaque item un composant AdditionalOptionCard auquel je transmet la fonction.

{ items.map( (e, i) => {
    return (
        <>
            <AdditionalOptionCard 
                itemId={i}
                handleChooseAdditionalOption={ chooseCardAdditionalOption }    
            />
        </>
    )
} ) }

const chooseCardAdditionalOption = (checked, index, itemId) => {
        this.props.handleChooseCardAdditionalOption(checked, index, itemId, cardType.card_id);
    }

Et enfin voici mon composant AdditionalOptionCard.

<div className="checkout-additional-options">
    {this.props.options.map( (item, index) => (
        item.option_status ? (
            <div key={index} className="additional-option-item">
                <div className="form-row">
                    <div className="form-input">

                        <div className="option-name">
                            <label for={ `additional-option-${item.option_id}` }>
                                {item.option_name}
                            </label>

                            <div className="option-price">
                                 <input 
                                     type="checkbox" 
                                     id={ `additional-option-${item.option_id}` }
                                     name="order[additional_options][]" 
                                     value={item.option_id} 
                                     onChange={ (e) => this.handleChooseAdditionalOption(e, item.option_id) } 
                                 />
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         )
     )}
</div>

handleChooseAdditionalOption = (e, index) => {
        this.props.handleChooseAdditionalOption(e.target.checked, index, this.props.itemId);
}

J'ai volontairement omis du code pour que ce soit pas trop chargé.
L'idée c'est que j'affiche un composant <CardType/> qui lui même affiche un ou plusieurs composant <AdditionalOptionCard/>

Quand je coche une des options dans ce dernier composant je dois faire remonter des informations jusqu'au premier composant pour mettre à jour mon state.

Mais quand je coche une option, "itemId" est d'abord undefined puis prends sa bonne valeur.
Sauf que le undefined au début provoque un dysfonctionnement dans mon application.

Vous avez une idée de comment je pourrais faire ?

Merci d'avance