DatePicker Controls of SPFx is not working

Hi.

I am using the SPFx framework. I have used a calendar control and added custom code to it. This works properly in the local dev environment , but not working once it is deployed to the SharePoint site.

Below is the code used : 

import * as React from 'react';
import { DateTimePicker, DateConvention, TimeConvention } from '@pnp/spfx-controls-react/lib/DateTimePicker';
import { DatePicker } from 'office-ui-fabric-react';

export interface IDatePickerTestProps {}
export interface DatePickerTeststate {
    DateControl:Date;
}
export default class DatePicketText extends React.Component<IDatePickerTestProps> {
public render(): React.ReactElement<any> {
return (
    
<div>
 <h1>Testing</h1>
 <table>
    <tr>
        <td>
        <DateTimePicker label="DateTime Picker" dateConvention={DateConvention.DateTime}/>
         </td>
    </tr>
    <tr>
        <td>                   
        <DatePicker label='Date advised:' placeholder="Select a date..."  />                       
        </td>
    </tr>
 </table>
</div>
);       
  }
}

The issue is that the UI is kind of distorted. If I select 17 Oct, then previous date is getting loaded. The UI is looking like this :

How to fix this ?