Next.js Hydration failed error

[ubeydullah26]

import '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';
import DateRangePicker from '@wojtekmaj/react-daterange-picker/dist/entry.nostyle';
import React, { useState } from 'react';
import 'react-calendar/dist/Calendar.css';

export default function CustomPage() {
    const [value, onChange] = useState([new Date(), new Date()]);
    return (
        <div>
            <DateRangePicker
                onChange={() => {
                    console.log('onChange');
                }}
                value={value}
            />
        </div>
    );
}

I am getting the error in next.js version 13.0.3.

next-dev.js?3515:20 Warning: Prop `className` did not match. Server: "react-daterange-picker__inputGroup__input react-daterange-picker__inputGroup__month" Client: "react-daterange-picker__inputGroup__input react-daterange-picker__inputGroup__day"

[wojtekmaj]

Looks like locale that gets detected on server-side is different from locale detected on front-end side. Pass locale to DateRangePicker, and if this still fails, manually provide format.