DatePicker's calendar falls behind other panels

Hello I am using material UI, i use Cards as panels to style my pages, today i tried implanting the DatePicker but it seems that when i open the calendar it falls behind the other panels and even the elements inside the same panel (<Card>) Here is an image : https://ibb.co/842DZjq

I tried giving the DatePicker and the calendarClassName style, in which i changed the z-index and position, but none of them work and the calendar still doesn’t open in the front Can you help me solve this issue ?, is there some kind of property that i don’t know about ? Thanks!

[Kiarash-Z]

Hello, Have you tried using wrapperClassName instead of calendarClassName? you can try it. if it doesn’t work, you can try wrapping the whole <DatePicker /> component in a div tag as:

<div style={{ position: 'relative', zIndex: '100' }}>
  <DatePicker
    ...someProps
   />
</div>

[me82852578]

This is my solution, maybe not the best, but at least I have been running well in my project for a while . solution