Assign default picklist value on page load, show only two countries UK and Ireland in the dropdownlist

Question

I am getting the below error when I am trying to add default picklist value on the combobox, please let me know how can i set the default value on the combobox, I am showing the country and state picklist values on the UI, country should be selected as United Kingdom when page is loaded and when users clicks on state then it should show the states related this country.. Also is there any possibility to show only 2 countries UK and Ireland in the dropdownlist..

Error during LWC component constructor phase: [LWC component's @wire target property or method threw an error during value provisioning. Original error:

[Cannot read properties of undefined (reading 'values')]]

JS :

import { LightningElement,wire } from 'lwc';

import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import { getPicklistValues } from "lightning/uiObjectInfoApi";
import country_FIELD from '@salesforce/schema/Account.BillingCountryCode';
import state_FIELD from '@salesforce/schema/Account.BillingStateCode';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import searchRetailCustomer from '@salesforce/apex/RetailCustomerSearch.searchRetailCustomer';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

let inputValue = {};

export default class RetailCustomerSearch extends LightningElement {
    streetValue;
    countryOptions;
    stateOptions;
    countryValue;
    stateValue;
    storeField;
    storeFieldIds;    

    @wire(getObjectInfo, {objectApiName: ACCOUNT_OBJECT }) accountInfo;

    @wire(getPicklistValues, {recordTypeId:'$accountInfo.data.defaultRecordTypeId', fieldApiName: country_FIELD })

    countryFieldInfo({ data, error }) {
        if (data) this.countryOptions = data.values;

        console.log('country options',this.countryOptions);
        this.countryValue = data.values[0].value;
    }

    @wire(getPicklistValues, {recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: state_FIELD })

    stateFieldInfo({ data, error }) {
        if (data) this.stateData = data;

        console.log('getPicklistValues State',this.stateData);
    }

Html :

<lightning-combobox name="CountryField"
                    label="Country"
                    placeholder="Select Country"
                    options={countryOptions}
                    value={countryValue}
                    onchange={handlecountryChange}>
</lightning-combobox>
<lightning-combobox name="State"
                    label="State"
                    placeholder="Select State"
                    options={stateOptions}
                    value={stateValue}
                    onchange={handleStateChange}>

Answer 1

The data is most likely not available when you tried to reference it. You should change your countryFieldInfo function to something like the following:

countryFieldInfo({ data, error }) {
    if (data) {
        this.countryOptions = data.values;

        console.log('country options',this.countryOptions);
        this.countryValue = data.values?.[0]?.value;
    }
}

As for restricting the values to the UK and Ireland, you could do something like:

.filter(item => your criteria) on the collection of picklist values. See more here