Nested if/then/else not initializing correctly

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

Nested if/then behavior isn't initializing correctly

Example playground

The initial render has "animal" as blank and the dependent fields don't show up until Cat or Fish is selected. Once you select "Cat", the dependent field "food" shows up, but also "kind" and "favorite" show up, even though I don't expect them to. Once you select something from the food dropdown, the correct field disappears and the behavior is again as expected, until you select the empty option from the "food" dropdown.

Expected Behavior

Nested "then" properties would only show up once the "if" condition is met.

Steps To Reproduce

1. Example playground
2. Select "Cat"
3. Notice "kind" and "favorite" both appear, even though they should only appear based on the selection of the "food" dropdown

Environment

- OS:
- Node:
- npm:

Anything else?

No response