Material-UI checkboxes and radio buttons look so ugly - checkbox

Question

Hi! I was making a form using Formik in React (class-based component) and I got very ugly looking checkboxes and radio buttons. I have tried to dig-into the code using inspect element in Chrome, but still couldn't solve it. I have uploaded here the picture as well. I have used the same checkboxes in Angular from the same source, but works fine there. I don't know why it is not working in React.
The Material-UI is installed in package.json file as a dependency:
"#material-ui/core": "^4.11.0"
Here is how I have written the code:
import React, { Component } from 'react';
import { Formik } from 'formik';
import { FormControlLabel, FormControl, FormLabel, Checkbox, Select, MenuItem, Radio, RadioGroup } from '#material-ui/core';
export default class FormikForm extends Component {
componentDidMount() {}
render() {
return (
<div className="formik-container">
<Formik>
<form>
<FormControlLabel
className="paper-checkbox col-md-12"
control={
<Checkbox
onChange={handleChange}
onBlur={handleBlur}
value="markAllDay"
color="secondary"
name="markAllDay"
/>
}
label="Book for the whole day"
/>
<FormControlLabel
className="paper-checkbox col-md-12"
control={
<Checkbox
onChange={handleChange}
onBlur={handleBlur}
value="markRecurring"
color="secondary"
name="markRecurring"
/>
}
label="Recurring event"
/>
<FormControl component="fieldset">
<RadioGroup
row aria-label="eventType"
name="recurEventType"
onChange={handleChange}
>
<FormControlLabel
value="recur"
control={<Radio />}
label="Whole recur event"
/>
<FormControlLabel
value="event"
control={<Radio />}
label="Only this event"
/>
</RadioGroup>
</FormControl>
</form>
</Formik>
</div>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>