Get Hands-on with Lightning-Record-Picker in Winter '24 New Lightning Record Picker Component - Challenge Part 3 - cannot validate

Dear all 

i have checked the link as below but still not solve the problem

https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007erH1vSAE

error is below 

In the boatPicker controller, we can’t find the proper configuration of which additional fields to display.

it looks like the problem comes from controller so i only shared my code as below , anyone who has passed the challenge please kindly give me some advices  

by the way 

i created the new playground , but still unsolve it .

the lwc works good in home page

 thanks in advanced 

import { LightningElement, wire} from 'lwc';

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import BOAT_PICTURE_FIELD from "@salesforce/schema/Boat__c.Picture__c";

import BOAT_NAME_FIELD from "@salesforce/schema/Boat__c.Name";

import BOAT_OWNER_FIELD from "@salesforce/schema/Boat__c.Contact__r.Name";

import BOAT_PRICE_FIELD from "@salesforce/schema/Boat__c.Price__c";

import BOAT_TYPE_FIELD from "@salesforce/schema/Boat__c.BoatType__r.Name";

const BOAT_FIELDS = [BOAT_PICTURE_FIELD, BOAT_NAME_FIELD,BOAT_OWNER_FIELD, BOAT_PRICE_FIELD, BOAT_TYPE_FIELD];

export default class boatPicker extends LightningElement {   

    boatId;

    get showBoat() {

        return this.boatId != null;

    }

    @wire(getRecord, { recordId: '$boatId', fields: BOAT_FIELDS  })

    boatDetail;

    displayInfo = {

        primaryField: 'Name',

        additionalFields: ['BoatType__r.Name'],

    };

    matchingInfo = {

        primaryField: { fieldPath: 'Name' },

        additionalFields: [{ fieldPath: 'BoatType__r.Name' }],

    };

    // BEGIN GETTERS FOR BOAT FIELDS

    get boatPicture() {

        return getFieldValue(this.boatDetail.data, BOAT_PICTURE_FIELD);

    }

    get boatName() {

        return getFieldValue(this.boatDetail.data, BOAT_NAME_FIELD);

    }

    get boatOwner() {

        return getFieldValue(this.boatDetail.data, BOAT_OWNER_FIELD);

    }

    get boatPrice() {

        return getFieldValue(this.boatDetail.data, BOAT_PRICE_FIELD);

    }

    get boatType() {

        return getFieldValue(this.boatDetail.data, BOAT_TYPE_FIELD);

    }

    // END GETTERS FOR BOAT FIELDS

    get backgroundStyle() {

        if (!this.showBoat) {

            return '';

        } else {

            return `background-image:url('${this.boatPicture}')`;

        }

    }

    handleChange(event) {

        this.boatId = event.detail.recordId;

        console.log("Selected Value: " + this.boatId);

        console.log("Selected: " + JSON.stringify(event.detail));

    }

}

#Trailhead Challenges