the border: 1px solid var(--bs-gray-300) ; , box-shadow: none; this line are over written
that is cauzing the boder to dispaly nont



Old code
.react-select-styled .react-select {
&__control {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
border-color: var(--bs-gray-400);
width: 100% ;
font-size: 1.1rem ;
font-weight: 500 ;
font-family: inherit;
line-height: 1.5 ;
color: var(--bs-gray-700) ;
appearance: none ;
background-color: var(--bs-body-bg) ;
background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none) ;
background-repeat: no-repeat ;
background-position: right 1rem center ;
background-size: 16px 12px ;
border: 1px solid var(--bs-gray-300) ;
border-radius: 0.475rem ;
box-shadow: none;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
border: 0;
box-shadow: 'none';

&--is-disabled {
background-color: $form-select-disabled-bg;
border-color: $form-select-disabled-border-color;

.react-select__placeholder {
color: $form-select-disabled-color;
}
}

&--is-focused {
background-color: var(--#{$prefix}gray-200);
}
}


FIX


.react-select-styled .react-select {
&__control {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
border-color: var(--bs-gray-400);
width: 100% ;
font-size: 1.1rem ;
font-weight: 500 ;
font-family: inherit;
line-height: 1.5 ;
color: var(--bs-gray-700) ;
appearance: none ;
background-color: var(--bs-body-bg) ;
background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none) ;
background-repeat: no-repeat ;
background-position: right 1rem center ;
background-size: 16px 12px ;
border: 1px solid var(--bs-gray-300) ;
border-radius: 0.475rem ;
box-shadow: none;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;


&--is-disabled {
background-color: $form-select-disabled-bg;
border-color: $form-select-disabled-border-color;

.react-select__placeholder {
color: $form-select-disabled-color;
}
}