Override Datepicker CSS classes but only in a specific component and not global

I'm quite new in React. My app contains 3 datepickers, and i can only use the classic datepicker plugin from React: react-datepicker(4.8.0).

Problem is, on my design, these datepickers don't have the same style. Another problem is that the only way for me to have a custom datepicker is to override datepicker css classes in App.css (global file), like this :

.react-datepicker__header {
  text-align: center;
  background-color: white;
  border-bottom: none;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
  font-family: "Nunito Sans", serif;
}

For example, i want to custom this class for another component in which i use a datepicker from the same plugin. I tried using "id" on datepicker, but doesn't work. My DatePicker looks like this in the code :

      <DatePicker
          id="filterDatePicker"
        dateFormat={"dd/mm/yyyy"}
        onChange={(date) => {
          const dateSelected = moment(date);
          console.log("date selected ? " + dateSelected);
          setDate(dateSelected);
        }}
        showPopperArrow={false}
        open={isDatePickerOpened}
      ></DatePicker>

Anyone to help me solve this?

EDIT

Following this link : react-datepicker input width will not adjust to 100%

I tried to set in my App.css like this after wrapping datepicker in a div with specific class :

.filterIssueDateDatePicker > div > div.react-datepicker__navigation-icon::before {
  border-color: #7695f7;
  border-width: 1px 1px 0px 0;
}

It doesn't work, can someone help me for this specific example of changing navigation icon in only one datepicker?