React js Material UI Error export 'LocalizationProvider' (imported as 'LocalizationProvider') was not found in '@mui/lab/LocalizationProvider

I am new to React Js Material Ui. I am using latest version of MUI. I already installed mui/lab. When I trying to use DatePicker component, it throws an error like this.

Here is my code.

import * as React from 'react';
    import AdapterDateFns from '@mui/lab/AdapterDateFns';
    import LocalizationProvider from '@mui/lab/LocalizationProvider';
    import DatePicker from '@mui/lab/DatePicker';
    
    function User() {
  const [joiningDate, handleJoiningDate] = useState(new Date());
  
   return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        value={joiningDate} onChange={ handleJoiningDate }   
      />
    </LocalizationProvider>
  );
}

export default User;

When I save this code, I am getting error like this in my terminal.

export 'LocalizationProvider' (imported as 'LocalizationProvider') was not found in '@mui/lab/LocalizationProvider

https://mui.com/components/date-picker/#localization I tried using the above link. But I cant able to rectify why this error came!! Help me to came out of this error. Thanks in advance.