Bootstrap 4.6.0 form-validation-states doesn't change the color of the validation border

I was unable to change the validation border color by modifying bootstrap's theme. My goal here is to change valid to be pink so I can see the change and invalid to blue for the same reason.

This is the code that I tried using:

// Required
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

$form-validation-states: map-merge(
    (
        "valid": (
            "color": pink,
            "icon": $form-feedback-icon-valid
        ),
        "invalid": (
            "color": blue,
            "icon": $form-feedback-icon-invalid
        )
    ),
    $form-validation-states
);

// Optional
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/code";
.
.
.

I've also tried placing the $form-validation-states on various location such as before the optional, after the optional, and before the required.

Source: https://getbootstrap.com/docs/4.6/components/forms/#customizing