MaterialCalendar datePicker appear distorted

Question

My date picker appear crooked if my AppTheme doesn't inherit directly from "Theme.MaterialComponents.Light.DarkActionBar".

I was trying to do a material bridge to apply new style to all view elements so I won't have to do it manually.

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
    <item name="materialCalendarTheme">@style/MaterialCalendar</item>
</style>

<style name="MaterialCalendar" parent="Theme.MaterialComponent">

But it doesn't work, the view is displayed wrong, am I missing something?

Like I said, the following is the output I'm looking for, but currently only get it when my app theme parent is this:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">