Dayjs output wrong date

I'm trying to use dayjs to format a date and it does that correctly but the date itself it outputs is wrong.

This is the raw date 2023-03-15T22:29:59.000000Z that I'm getting from the backend and passing to dayjs and in my db it's 2023-03-15 16:29:59 but it's displaying like March 16, 2023 11:44 AM

This is my code, after this I just import this into my app.js

import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone"
import utc from "dayjs/plugin/utc"

dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.tz.setDefault("America/Costa_Rica")

export default {
    install(Vue, options) {
        Vue.prototype.$date = dayjs;
        Vue.prototype.$date.prototype.prettyDate = function(date) {
            date = dayjs(date);
            console.log('date date', date)
            const diff = this.diff(date, "day");
            if (!diff) {
                return this.format("h mm A");
            } else if (diff === 1) {
                return `Yesterday, ${this.format("h mm A")}`;
            } else {
                return this.format("MMMM DD, YYYY h  mm A");
            }
        };
        Vue.prototype.$date.prototype.testDate = function(date) {
            return dayjs(date).format('MMMM DD, YYYY h:mm A');
        };
    }
};

This is how I use it

console.log(this.$date(date).prettyDate()) // 4 23 PM
console.log(this.$date(date).testDate(), date); //March 16, 2023 11:46 AM 2023-03-15T22:23:27.000000Z

I have the timezone as America/Costa_Rica and if I do dayjs.tz.guess() it confirms it. But the dates are not correct. What am I missing?