the record id keeps being undefined?

Question

I have created this LWC components, which purpose is to expose the the recordId to the child components. But for some reason I am not able to get the recordId - console.log tells me that it is undefined and I don't understand why..

html:

<!-- checkboxWrapper.html -->
<template>
    <lightning-card title="Checkbox Wrapper">
        <!-- Include the OrderInsuranceCheckbox component and pass recordId -->
        <c-insurance-checkbox record-id={recordId}></c-insurance-checkbox>

        <!-- Additional content or components can be added here -->
        <div>
            <!-- Other components or content here -->
        </div>
    </lightning-card>
</template>

js:

// checkboxWrapper.js
import { LightningElement, api } from 'lwc';

export default class CheckboxWrapper extends LightningElement {
    @api recordId; // Expose the recordId property to the parent component
    _checkedByDefault;


    @api
    get checkedByDefault() {
        return this._checkedByDefault;
    }
    
    set checkedByDefault(value) {
        this._checkedByDefault = value;
    }

    
    connectedCallback() {
        setTimeout(() => {
            alert(this.recordId);
        }, 5);
        
        console.log('recordId in parent component:', this.recordId);

    // You can add additional logic or data handling here if needed
    }
}