Hello Everyone, I am working on getting the LWC superbadge but got struck at challenge 10, I am trying to complete the below challenge

"Integrate Third Party Scripts to build the component fiveStarRating"

but keep on getting the following error message.
"Challenge Not yet complete... here's what's wrong:
We can't find the API decorator being imported in fiveStarRating.js file. Make sure the component was created according to the requirements."

my Js is below, can anyone help me out in this issue here.

//import fivestar static resource, call it fivestar
import fivestar from '@salesforce/resourceUrl/fivestar';
import { reduceErrors } from 'c/ldsUtils';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { api, LightningElement } from 'lwc';
// add constants here
const TOAST_ERROR_TITLE = 'Error loading five-star';
const ERROR_VARIANT = 'error';
const READ_ONLY_CLASS = 'readonly c-rating';
const EDITABLE_CLASS = 'c-rating';
export default class FiveStarRating extends LightningElement {
  //initialize public readOnly and value properties
  @api readOnly = false;
  @api value;

  editedValue;
  isRendered;

  //getter function that returns the correct class depending on if it is readonly
  get starClass() {
    return this.readOnly ? READ_ONLY_CLASS : EDITABLE_CLASS;
  }

  // Render callback to load the script once the component renders.
  renderedCallback() {
    if (this.isRendered) {
      return;
    }
    this.loadScript();
    this.isRendered = true;
  }

  //Method to load the 3rd party script and initialize the rating.
  //call the initializeRating function after scripts are loaded
  //display a toast with error message if there is an error loading script
  loadScript() {
    Promise.all([
      loadScript(this, fivestar + '/rating.js'),
      loadStyle(this, fivestar + '/rating.css')
    ])
      .then(() => {
        this.initializeRating();
      })
      .catch(error => {
        this.dispatchEvent(new ShowToastEvent({
          title: TOAST_ERROR_TITLE,
          message: error,
          variant: ERROR_VARIANT
        }));
      })
  }

  initializeRating() {
    let domEl = this.template.querySelector('ul');
    let maxRating = 5;
    let self = this;
    let callback = function (rating) {
      self.editedValue = rating;
      self.ratingChanged(rating);
    };
    this.ratingObj = window.rating(
      domEl,
      this.value,
      maxRating,
      callback,
      this.readOnly
    );
  }

  // Method to fire event called ratingchange with the following parameter:
  // {detail: { rating: CURRENT_RATING }}); when the user selects a rating
  ratingChanged(rating) {
    this.dispatchEvent(new CustomEvent('ratingchange', { detail: { rating } }));
  }
}