Latest version of Material UI Calendar styling is not working

Question

I am working on Material UI with React (refer Package json for versions). Trying to implement the calendar functionality. But the CSS for the same is not working. Wanted to try adding CDN trick on index.html, but in the MUI documentation it is saying strictly not recommended for production environment.

Here is my package.json details for version of MUI & React:

{
  "name": "date_picker_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.17",
    "@mui/x-date-pickers-pro": "^6.18.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "date-fns": "^2.30.0",
    "dayjs": "^1.11.10",
    "react-date-range": "^1.4.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.1",
    "web-vitals": "^2.1.4"
  },

My App.jsx code:

import{Chip, Divider} from '@mui/material';
import CalenderComp from './components/CalenderComp.jsx';
import './App.css';

function App() {
  return (
    <>
      <Divider><Chip label="Calender"/></Divider>
      <CalenderComp />
      
    </>
  );
}

export default App;

My Calendar Component Code:

import { useState} from 'react';
import { TextField } from '@mui/material';
import React from 'react'
import { Calendar } from 'react-date-range';

function CalenderComp() {

  const [calendar, setCalender] = useState('');
  const [open, setOpen] = useState(false);

  function handleSelect(date){
    console.log(date);
  }
  return (
    <div style={{'textAlign': 'center'}}>
      <TextField 
      label="Select Date"
      name="date"
      variant='outlined'
      value={calendar}
      onClick={()=> setOpen(open => !open)}
      />
      <br />

      {open &&
      <Calendar 
      date = {new Date()}
      onChange={handleSelect}
      />}
    </div>
  )
}

export default CalenderComp

The Final output when I click on the text field to view the calendar:

Output Screenshot

Why the CSS is soo absurd? I did install MUI as it is described in MUI website. Please Help.

I tried reinstalling MUI on npm, but still not working