Yup Validation for Dropdown: Color Palette Application ⚫🟡🔴🟢🔵

I am creating React based application and using Yup for validation. However I get an error of Cyclic Dependency while validating.

Explanation:Users will see two drop down list of colors as seen in the image below.By default Both the drop down will have White as selected.

Note By default on page load, White - White will be the given option. This selection is valid.

Scenarios: User are about to start drawing and now they are selecting colors from the drop down list.

Example:

1. White - White : OK
2. White - Red : Error:(You must select othercolor, cannot select white in 1st drop down)
3. Red - White: Error:(Youmust select other color, cannot select white in 2nd drop down)
4. Red - Red : Error:(Cannot select two same colors except White for bothdrop down)
5. Red - Green: OK
6. Green - Red: OK
7. yellow - Red: OK
8. yellow - White: Error(You must select other color, cannot selectwhite in 2nd drop down)

I am trying to start the first validation but it seems there is a problem of Cyclic Dependency. I'd appreciate your help. Thanks.

FirstColorDDL:""SecondColorDDL:""

const Color = () => {    return Yup.object().shape({        FirstColorDDL: Yup.string()            .required('Please Choose any Color !!'),            .when("SecondColorDDL", {            is: (SecondColorDDL) => SecondColorDDL && SecondColorDDL == "White",            then: Yup.string().required("You must select other color, cannot select white in 2nd drop down")            }),        SecondColorDDL: Yup.string()            .required('Please Choose any Color !!'),            .when("FirstColorDDL", {            is: (FirstColorDDL) => !FirstColorDDL|| FirstColorDDL.contains("White"),            then: Yup.string().required("You must select other color, cannot select white in 1st drop down")         })    })