Why is my PrimeReact dropdown component not detecting custom class styles?

I’m using multiple Prime React dropdown components in my Project and want to style one of them in a different way. I’ve global styles for all of them in CSS to override the default one’s. So for this specific dropdown, I tried applying new CSS styles using a custom class “custom-dropdown”. But it’s not even detecting the CSS styles inside nested in class “custom-dropdown”. But, when applying without nested class, its working. (Sorry, Not able to provide entire code, so elaborated here. Thank you)

I tried this way in CSS, but I couldn’t even see the styles while inspecting. Thank you

<Dropdown
      className="custom-dropdown"
      options={Days}
      value={selectedDay}
      onChange={(e) => {
      setSelectedDay(e.target.value);
     }}
/>

.custom-dropdown{ 
.p-dropdown-items {
  display: flex !important;
  flex-wrap: wrap !important;
}

.p-dropdown-items-wrapper {
  overflow: hidden !important;
}

.p-dropdown-panel {
  max-width: 200px !important;
  min-width: 200px !important;
}
}