Wrong time being returned by date-fns when involving 2 timezones - vue.js

Question

Introduction
I have the current situation:
I receive the date from the backend as UTC
The user can have in his own profile his timezone setup
User can pick the date and time in two different time pickers
As soon as the date is returned by the backend I convert it to the user local timezone (timezone of his profile)
User selects new date, I create a zonedDate, modify it and store it as UTC
User selects new time, I use the utcToZonedTime to convert to user's local timezone (the UTC returned from backend), then I update with setHours and setMinutes and store back as UTC using toISOString() string
How the code is structured
I currently have the following code for when the user pick the date
import utcToZonedTime from 'date-fns-tz/utcToZonedTime';
const localizedTime = computed(() =>
utcToZonedTime(record.value.date, loggedUser.timezone)
);
const date = computed({
get: () => formatToDate(localizedTime.value),
set: (value: string) => {
// The `value` will come as YYYY-MM-DD from the DatePicker component
const zonedDateString = `${value}T17:30`;
const zonedDate = toDate(zonedDateString, {
timeZone: loggedUser.timezone,
});
record.value.date = zonedDate.toISOString();
},
});
This works fine for now. I set the hour and minutes to a hardcoded 17:30.
Now, the problem happens whenever picks the time:
import utcToZonedTime from 'date-fns-tz/utcToZonedTime';
import setMinutes from 'date-fns/setMinutes';
import setHours from 'date-fns/setHours';
const localizedTime = computed(() =>
utcToZonedTime(record.value.date, loggedUser.timezone)
);
const time = computed({
get: () => format(localizedTime.value, 'HH:mm'),
set: (time: string) => {
// Time is returned as HH:mm from the input
const [hour, minutes] = time.split(':');
console.log('Localized time:')
console.log(localizedTime.value);
let currentDateParsed = setHours(
localizedTime.value,
hour as unknown as number
);
currentDateParsed = setMinutes(
currentDateParsed,
minutes as unknown as number
);
console.log('Current date parsed:')
console.log(currentDateParsed);
record.value.date = currentDateParsed.toISOString();
},
});
Problem
As a setup I have the following criterias:
User timezone is set to Europe/Lisbon (GMT+1)
My computer timezone is set to Europe/Zagreb (GMT+2)
I receive the following date from backend in UTC 2022-06-02T16:00:56.000000Z
Time is displayed as 17:00 (I'm using the user profile's timezone and not the computer's timezone)
Whenever I set the date, it works perfect time. Whenever I try to set hours and minutes, the timezones get mixed up.
I select the time as 18:30 and it is displayed back to the user as 17:30.
The part of the code that is giving me problems is:
const time = computed({
get: () => format(localizedTime.value, 'HH:mm'),
set: (time: string) => {
// Time is returned as HH:mm from the input
const [hour, minutes] = time.split(':');
console.log('Localized time:')
console.log(localizedTime.value); 👈 // Thu Jun 02 2022 17:00:56 GMT+0200 (Central European Summer Time)
let currentDateParsed = setHours(
localizedTime.value,
hour as unknown as number
);
currentDateParsed = setMinutes(
currentDateParsed,
minutes as unknown as number
);
console.log('Current date parsed:')
console.log(currentDateParsed); 👈 // Thu Jun 02 2022 18:30:56 GMT+0200 (Central European Summer Time)
console.log('Current date parsed toISOString():');
console.log(currentDateParsed.toISOString()); 👈 // 2022-06-02T16:00:56.000Z
record.value.date = currentDateParsed.toISOString();
},
});
I have tried converting the date back to UTC and work only in UTC and also only in user's local time but nothing seems to work. I have uploaded the following video showing the issue