Get wrong time in mui/x-date-picker

Question

I try to convert date from date picker to iso format but always get 3 hours behind of my time.How can I resolve it?

This is my code:

'use client';
import React, { useEffect, useState } from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import styles from '@/app/broadcast/broadcast.module.scss';
import Input from '@/components/Input/Input';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import './styles.css';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault(Intl.DateTimeFormat().resolvedOptions().timeZone);

const DatePicker = ({...props}) => {
const [subscribedAfter, setSubscribedAfter] =
    useState<Dayjs | null>(dayjs());
  return (
    <>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DesktopDatePicker
          className={styles.form__input_date}
          value={subscribedBefore}
          format={'MMMM DD, YYYY'}
          onChange={(newValue) => setSubscribedBefore(newValue)}
          renderLoading={() =>
            <Input {...props}
            />}
        />
      </LocalizationProvider>
    </>
  );
};

This is my date in ISO format: 2024-06-30T11:47:42.419Z (real time 14:47)
For any help will be appriciated.

I tried to get timezone from my browser and set it by myself,but it doesn't work.

Answer 1

I found the solution by adding utc offset into my hook.Like that:

const [subscribedAfter, setSubscribedAfter] =
    useState(dayjs.utc().utcOffset(0, true));