How can I give select and options styles in DateRangePicker component in react-date-range library?

Question

I am customizing the styles myself, I have edited most of them, but I cannot give padding as hover and vertical (axis-y) in options section. I couldn't find a solution.

I am writing my code in react and using scss

The part that is rendered from the DateRangePicker component:

<div class="rdrMonthAndYearPickers">
  <span class="rdrMonthPicker">
    <select>
      <option value="0">January</option>
      <option value="1">February</option>
      <option value="2">March</option>
      <option value="3">April</option>
      <option value="4">May</option>
      <option value="5">June</option>
      <option value="6">July</option>
      <option value="7">August</option>
      <option value="8">September</option>
      <option value="9">October</option>
      <option value="10">November</option>
      <option value="11">December</option>
    </select>
  </span>
  <span></span>
  <span class="rdrYearPicker">
    <select>
      <option value="2043">2043</option>
      <option value="2042">2042</option>
      <option value="2041">2041</option>
      <option value="2040">2040</option>
      <option value="2039">2039</option>
      <option value="2038">2038</option>
      <option value="2037">2037</option>
      <option value="2036">2036</option>
      <option value="2035">2035</option>
      <option value="2034">2034</option>
      <option value="2033">2033</option>
      <option value="2032">2032</option>
      <option value="2031">2031</option>
      <option value="2030">2030</option>
      <!-- Other years -->
      <option value="1923">1923</option>
    </select>
  </span>
</div>

part of date-picker.scss file:

.rdrMonthPicker,
.rdrYearPicker {
  margin: 0 5px;

  select {
    text-align: start;

    option {
      background-color: #000;

      &:hover {
        color: $f7f7f7;
      }
    }
  }
}

This can be better understood from this img: