title: Yup validataion not working on condition based on another field condition
body: <p>I have a <code>image</code> field, and I want this file to be required only when <code>image_old</code> field is empty and <code>poster_type</code> is <code>image</code>.</p>
  <p>Here, the <code>poster</code> type is a select box with two possible value <code>script</code> or <code>image</code>. Next, <code>image_old</code> holds file name like <code>picture.png</code>, this is the value of <code>poster image</code>, and this will have value only in case of edit. (Its becauuse, I am using the same component for create and edit)</p>
  <p>My code looks like:</p>
  <pre><code>import { useForm } from &quot;react-hook-form&quot;;
  import { yupResolver } from &quot;@hookform/resolvers/yup&quot;;
  import * as Yup from &quot;yup&quot;;
  
  export function App() {
    const schema = Yup.object({
      poster_type: Yup.string()
        .required()
        .oneOf([&quot;image&quot;, &quot;script&quot;])
        .label(&quot;Poster Type&quot;),
      image: Yup.mixed().when([&quot;image_old&quot;, &quot;poster_script&quot;], {
        is: (poster_script, image_old) =&gt; {
          if (poster_script === &quot;image&quot; &amp;&amp; image_old === &quot;&quot;) {
            return true;
          }
        },
        then: (schema) =&gt;
          schema
            .test(&quot;name&quot;, &quot;Image is required&quot;, (value) =&gt; {
              return value !== undefined &amp;&amp; value[0] &amp;&amp; value[0].name !== &quot;&quot;;
            })
            .test(&quot;fileSize&quot;, &quot;File must be less than 2MB&quot;, (value) =&gt; {
              return value !== undefined &amp;&amp; value[0] &amp;&amp; value[0].size &lt;= 2000000;
            })
            .test(&quot;type&quot;, &quot;Only images are supported&quot;, (value) =&gt; {
              return (
                value !== undefined &amp;&amp; value[0] &amp;&amp; value[0].type.includes(&quot;image&quot;)
              );
            }),
        otherwise: (schema) =&gt; schema.nullable()
      })
    });
  
    const {
      register,
      handleSubmit,
      formState: { errors }
    } = useForm({
      resolver: yupResolver(schema)
    });
  
    const onSubmit = async (input) =&gt; {
      console.log(&quot;input&quot;, input);
    };
  
    // const item = {
    //   id: 12,
    //   image_old: &quot;old_image.png&quot;
    // };
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;select
          className={`form-control w-full ${
            errors[&quot;poster_type&quot;] ? &quot;border-red-500&quot; : &quot;&quot;
          }`}
          id=&quot;poster_type&quot;
          name=&quot;poster_type&quot;
          autoComplete=&quot;off&quot;
          {...register(&quot;poster_type&quot;)}
        &gt;
          &lt;option value=&quot;&quot;&gt;-- Select --&lt;/option&gt;
          &lt;option value=&quot;image&quot;&gt;Image&lt;/option&gt;
          &lt;option value=&quot;script&quot;&gt;Script&lt;/option&gt;
        &lt;/select&gt;
        &lt;span
          className={
            errors[&quot;poster_type&quot;] ? &quot;text-red-500 text-xs italic block&quot; : &quot;hidden&quot;
          }
        &gt;
          {errors[&quot;poster_type&quot;]?.message}
        &lt;/span&gt;
  
        &lt;input
          className={`form-control
                          block
                          w-full
                          px-3
                          py-1.5
                          text-base
                          font-normal
                          text-gray-700
                          bg-white bg-clip-padding
                          border border-solid border-gray-300
                          rounded focus:outline-none ${
                            errors[&quot;image&quot;] ? &quot;border-red-500&quot; : &quot;&quot;
                          }`}
          type=&quot;file&quot;
          id=&quot;image&quot;
          {...register(&quot;image&quot;)}
        /&gt;
        &lt;span
          className={
            errors[&quot;image&quot;] ? &quot;text-red-500 text-xs italic block&quot; : &quot;hidden&quot;
          }
        &gt;
          {errors[&quot;image&quot;]?.message}
        &lt;/span&gt;
        &lt;input type=&quot;hidden&quot; defaultValue=&quot;&quot; {...register(&quot;image_old&quot;)} /&gt;
  
        &lt;input type=&quot;submit&quot; /&gt;
      &lt;/form&gt;
    );
  }
  
  </code></pre>
  <p>Long story short:</p>
  <ol>
  <li>When users select <code>image</code> as poster_type, it should shows, <code>image is required</code></li>
  <li>if <code>image_old</code> field is not empty, it should not be throwing, required error message, should show only when <code>poster_type</code> is <code>image</code> and <code>image_old</code> should not be empty.</li>
  </ol>
  <p>Here is the <a href="https://codesandbox.io/s/billowing-sunset-nnz0gr?file=/src/App.js" rel="nofollow noreferrer">sandbox link</a>.</p>