Unable to use MUI X Date picker Component inside Joy UI CssVarsProvider wrapper

Crash errors whenever i try to use DatePicker component in a any of my component.

package.json

  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@hookform/resolvers": "^3.6.0",
    "@mui/icons-material": "^5.16.1",
    "@mui/joy": "^5.0.0-beta.36",
    "@mui/material": "^5.16.4",
    "@mui/x-date-pickers": "^7.10.0",
    "date-fns": "^3.6.0",
    "dayjs": "^1.11.11",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.52.0",
    "react-router-dom": "^6.24.1",
    "react-scripts": "^5.0.1",
    "typescript": "^5.5.3",
    "web-vitals": "^2.1.4"
  },

Turns out using CssVarsProvider wrapper causes it to crash.

App.js

export default function App () {
  return (
    <CssVarsProvider disableTransitionOnChange>
      <CssBaseline />
      <Router>
        <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
          <Header />
          <Sidebar />
          <Routes>
            <Route path="/" element={<Navigate to="/listing" replace />} />
            <Route path="/home" element={<MainContent title="Home"><Development /></MainContent>} />
            <Route path="/dashboard" element={<MainContent title="Dashboard"><Development /></MainContent>} />
            <Route path="/listing" element={<MainContent title="Listing"><OrderTable /></MainContent>} />
            <Route path="/users" element={<MainContent title="Users"><Users /></MainContent>} />
          </Routes>
        </Box>
      </Router>
    </CssVarsProvider>
  );
}

CreateUser.tsx Parent Component

const CreateUser: React.FC<UserModalProps> = () => {
//... other code
<Modal>
   <Sheet>
{
  fields.map(({ name, label, placeholder, type }) => (
    <FormControl key={name} sx={{ mb: 1 }}>
      <FormLabel sx={{ marginBottom: "4px" }}>{label}</FormLabel>
      // ....other code
      {type == "date" && <CustomDatePicker label="Choose a date" onDateChange={handleDateChange} />}
      //... other code
    </FormControl>
  ));
}
//... other code
  </Sheet>
</Modal>
}
 

I have imported that to my parent component in a modal.

CustomDatePicker.tsx

import React, { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Button, Modal, Box, Typography } from '@mui/material';
import { Dayjs } from 'dayjs';

interface CustomDatePickerProps {
  label?: string;
  onDateChange?: (date: Dayjs | null) => void;
}

const CustomDatePicker: React.FC<CustomDatePickerProps> = ({
  label = 'Select Date',
  onDateChange,
}) => {
//... other code
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <Box
        >
          <Typography variant="h6" component="h2" sx={{ mb: 2 }}>
            {label}
          </Typography>
          <DatePicker
            label={label}
            value={selectedDate}
            onChange={handleDateChange}
            sx={{ width: '100%', mb: 2 }}
          />
        </Box>
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

I was expecting it to show a view just like its shown here

Solved this issue by using Joy UI input

Solution was to use Experimental_CssVarsProvider wrapper

import { Experimental_CssVarsProvider as MaterialCssVarsProvider } from '@mui/material/styles';
import { extendTheme as extendJoyTheme, THEME_ID } from '@mui/joy/styles';
const joyTheme = extendJoyTheme();

 export default function App () {
  return (
    <MaterialCssVarsProvider>
      <CssVarsProvider theme={{ [THEME_ID]: joyTheme }}>
        <CssBaseline />
        <Router>
          <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
            <Header />
            <Sidebar />
            <Routes>
              <Route path="/" element={<Navigate to="/listing" replace />} />
              <Route path="/home" element={<MainContent title="Home"><Development /></MainContent>} />
              <Route path="/dashboard" element={<MainContent title="Dashboard"><Development /></MainContent>} />
              <Route path="/listing" element={<MainContent title="Listing"><OrderTable /></MainContent>} />
              <Route path="/users" element={<MainContent title="Users"><Users /></MainContent>} />
            </Routes>
          </Box>
        </Router>
      </CssVarsProvider>
    </MaterialCssVarsProvider>
  );
}

Reference Link - Github