fix: in FlowStep wrap in Form component only controlled inputs

packages/web/src/components/FlowStep/index.jsx

@@ -263,11 +263,6 @@ function FlowStep(props) {
         <Content>
           <List>
             <StepExecutionsProvider value={stepWithTestExecutionsData}>
-              <Form
-                defaultValues={step}
-                onSubmit={handleSubmit}
-                resolver={stepValidationSchema}
-              >
               <ChooseAppAndEventSubstep
                 expanded={currentSubstep === 0}
                 substep={{
@@ -298,7 +293,11 @@ function FlowStep(props) {
                         step={step}
                       />
                     )}
-
+                    <Form
+                      defaultValues={step}
+                      onSubmit={handleSubmit}
+                      resolver={stepValidationSchema}
+                    >
                       {substep.key === 'testStep' && (
                         <TestSubstep
                           expanded={currentSubstep === index + 1}
@@ -317,7 +316,6 @@ function FlowStep(props) {
                           flowId={flowId}
                         />
                       )}
-
                       {substep.key &&
                         ['chooseConnection', 'testStep'].includes(
                           substep.key,
@@ -332,9 +330,9 @@ function FlowStep(props) {
                             step={step}
                           />
                         )}
+                    </Form>
                   </React.Fragment>
                 ))}
-              </Form>
             </StepExecutionsProvider>
           </List>
         </Content>