Issue with Date Picker

[Minhazul-Islam18]

Hey, I am stacked with a problem with Datepicker. I'm describing below :

When I tried to use Datepicker like:
<DateTimePicker label="Ends On" {...register("endTime", { required: "This field is required", })} />

It's showing broken (See attachment):

But using MODAL is fine:
<DateTimePicker label="Ends On" dropdownType="modal" {...register("endTime", { required: "This field is required", })} />

See Attachment:

Packages.json:
"@mantine/core": "^6.0.22", "@mantine/dates": "^6.0.21",

App.jsx:
`import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ColorSchemeProvider, MantineProvider } from "@mantine/core";
import DefaultTheme from "./Pages/Store/DefaultTheme";
import { Notifications } from "@mantine/notifications";
const AppWrapper = ({ App, props }) => {
const [colorScheme, setColorScheme] = useState("light");

const toggleColorScheme = (value) =>
    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));

return (
    <ColorSchemeProvider
        colorScheme={colorScheme}
        toggleColorScheme={toggleColorScheme}
    >
        <MantineProvider
            theme={{
                colorScheme: colorScheme || DefaultTheme.theme,
                fontFamily: "Now, sans-serif",
            }}
            withGlobalStyles
            withNormalizeCSS
        >
            <Notifications />
            <App {...props} />
        </MantineProvider>
    </ColorSchemeProvider>
);

};

createInertiaApp({
progress: {
color: "#ff6243",
showSpinner: true,
},
resolve: (name) =>
resolvePageComponent(
./Pages/${name}.jsx,
import.meta.glob("./Pages/**/*.jsx")
),
setup({ el, App, props }) {
createRoot(el).render();
},
});
`

Thanks in Advance.

[Minhazul-Islam18]

@rtivital , Sorry to mention. Can you help me to get rid of it?

[rtivital]

Provide a sandbox with a minimal reproduction