Connect a keyed logic to an 'unkeyed' one

[lucaleoni73]

I have a logic that has no key nor props. Within this one I want to connect a logic that handles a form and it has props and keys. In React I generated a key string and used that as initial props in useActions or useValues. But when I try to run the code I got an error because in the logic.ts file in the connect I declare the keyed logic without specifying the key. I don't have the key because the logic does not have any props or anything. How can I do? But first of all, is this even possible to achieve?

Here a piece of my code (this component is within a view and on an event occurring this modal opens):

export function CreateBookingModal() {
    const key = useRef(uuid()).current
    debugLog('CreateBookingModal', key)
    const { createBookingModalVisible } = useValues(calendarLogic)
    const { closeCreateBookingModal } = useActions(calendarLogic)
    const { submitAddBookingForm } = useActions(addBookingFormLogic({ logicKey: key }))

    return (
        <LemonModal
            {...props}
            isOpen={createBookingModalVisible}
            onClose={closeCreateBookingModal}
            title={<>Crea prenotazione</>}
            width={600}
            children={
                <div>
                    <UpsertBookingFormContent logicKey={key} />
                </div>
            }
            footer={
                <>
                    <LemonButton type="secondary" onClick={closeCreateBookingModal}>
                        Annulla
                    </LemonButton>
                    <LemonButton type="primary" onClick={() => submitAddBookingForm()}>
                        Crea
                    </LemonButton>
                </>
            }
        />
    )
}

Here the unkeyed logic:

export const calendarLogic = kea<calendarLogicType>([
    path(['views', 'calendarLogic']),
    connect({
        actions: [
            experiencesLogic,
            ['loadExperiencesWithVariants'],
            addBookingFormLogic,
            ['setAddBookingFormValue', 'resetAddBookingForm'],
        ],
        values: [experiencesLogic, ['experiencesWithVariants']],
    }),
...

Here the keyed logic:

export const addBookingFormLogic = kea<addBookingFormLogicType>([
    props({} as AddBookingFormLogicProps),
    key((props) => props.logicKey),
    connect({
        values: [experiencesLogic, ['globalExperiences as availableExperiences']],
    }),
    // FORM LOGIC
    forms(({ values }) => ({
        addBookingForm: {
            defaults: {
                customerName: null,
                customerEmail: null,
                customerPhone: null,
                experience: values.availableExperiences[0]?.slug ?? null,
...