Ic-js library, not showing the proper encoded account

this is how my store looks like:

export interface LoggedInProfile {
  'user_principal' : Principal,
  'username' : string,
  'open_offers' : Array<[bigint, OfferDetails]>,
  'user_deposit_address' : IcrcAccount,
  'registered_at' : bigint,
  'balances' : Array<[Principal, BalanceDetail]>,
}

export type OptionalProfile = LoggedInProfile | null;

export interface ProfileStoreData{
    is_available: boolean,
    profile: OptionalProfile
};

export const profileStore = writable<ProfileStoreData>({
    is_available: false,
    profile: null,
});

I made a custom function to handle undefined | Icrc1Acccount as argument:

const show_encodedIcrcAccount = (account: undefined | IcrcAccount) => {
  if (account !== undefined){
    console.log(account);
    return encodeIcrcAccount(account)
  }else{
    return "Failed to encode"
  }
 }

this is how I’m passing the value:

<p>Encoded IcrcAccount: {show_encodedIcrcAccount($profileStore.profile?.user_deposit_address)}</p>

the problem here is, I’m just receiving the principal.

Are you still having this issue?

Are you sure that the returned encoded ICRCAccount listed is a principal? It looks like it might be a canister id.