Как проверить, не имеет ли первый массив значения из второго массива с помощью YUP

[maplol123@gmail.com]

Проблема с валидацией через модули yup и react-hook-form.
Я выбираю первый radio, чтобы отображать первый массив radio с цветами, выбираю один из цветов, затем я выбираю второй radio, чтобы отображать второй массив radio с другими цветами. Если мой выбранный цвет из первого массива не включает второй массив, как показать ошибку?

CodeSandbox: https://codesandbox.io/s/focused-mic...e=/src/App.tsx

import React, { useState } from "react";

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

export default function App() {
  const schema = yup.object().shape({
    choose: yup.string().typeError("select first or second").required(),
    color: yup
      .string()
      .typeError("selected color doesn't include of this array")
      .required("select color")
  });

  const {
    register,
    formState: { errors },

    handleSubmit
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  const onError = (error: any) => {
    console.log(error);
  };

  let colors = [
    ["black", "white", "pink"],
    ["black", "red", "blue"]
  ];
  const [select, setSelect] = useState<number>();

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <label>
        <input
          type="radio"
          onClick={() => setSelect(0)}
          value={"first"}
          {...register("choose")}
        />
        first
      </label>
      <label>
        <input
          type="radio"
          onClick={() => setSelect(1)}
          value={"second"}
          {...register("choose")}
        />
        second
      </label>
      <p> {errors && errors.choose?.message}</p>

      <div>
        {select != null &&
          colors[select].map((color: any, i: number) => (
            <label key={i}>
              <input
                type="radio"
                value={color}
                {...register("color")}
              />
              {color}
            </label>
          ))}
        {select != null && <p> {errors && errors.color?.message}</p>}
      </div>

      <button type="submit">Add</button>
    </form>
  );
}