React, Chakra UI, Cypress. Can't to get an input element by name

[TangoPJ]

Hi all. Can someone help me with my problem - this is my test:

describe("How to click to the link on the analitics page", () => {
  beforeEach(() => {
    cy.clearCookies();
    cy.login();
    cy.visit("https://expample.com/");
  });

  it("login popup is visible", () => {
    cy.contains("About A/B Testing").should("be.visible");
  });
  it("Create Experiment", () => {
    cy.contains("Create Experiment").click();
    cy.get('input[name="name"]').type("We can click on the link");
    cy.get('input[name="urls.0"]').type("html/example.html");
    cy.contains("Save").click();
    // set a goal
    cy.get("#add-goal-button").parents("button").click();
    cy.get("input[name=goalName]").type("button");
    cy.get("textarea[name=selector]").type(".ui-button");
    cy.get("button[type='submit']").click();
    // run Experiment
    cy.contains("Run Experiment").click();
    cy.contains("UNIQUE VISITORS").should("be.visible");
    // click to the link
    cy.get(
      '[id="analytics-tbody"] > tr:nth-child(2) > td:nth-child(1) > div > a'
    )
      .should("have.attr", "href")
      .then((href) => {
        cy.visit(href);
      });
  });
});

I have a component (a form with custom inputs, and this form is inside the modal. I render it by clicking the Add Goal button), the form looks like this:

<Formik
        initialValues={{ goalName: '', selector: '' }}
        validationSchema={validate}
        onSubmit={handleSubmit}
      >
        {({ isSubmitting, errors, values, handleChange, isValidating }) => (
          <Form className={styles['create-new-goal-form__form']}>
            <Flex className={styles['create-new-goal-form__form-fields']}>
              <Box className={styles['create-new-goal-form__form-field']}>
                <InputField
                  maxLength={50}
                  placeholder='Enter name'
                  name='goalName'
                  label={
                    <Text textStyle='small' as='span' color='#718096'>
                      Goal name
                    </Text>
                  }
                />
              </Box>
              <Box className={styles['create-new-goal-form__form-field']}>
                <FormControl isInvalid={!!errors.selector}>
                  <FormLabel>
                    <Text textStyle='small' as='span' color='#718096'>
                      CSS selector
                    </Text>
                  </FormLabel>
                  <Textarea
                    className={styles['create-new-goal-form__field-textarea']}
                    size='sm'
                    name='selector'
                    placeholder='Enter the CSS selector'
                    value={values.selector}
                    onChange={handleChange}
                  />
                  {!isValidating && <FormErrorMessage>{errors.selector}</FormErrorMessage>}
                </FormControl>
              </Box>
              <SecondaryButton
                w='full'
                type='submit'
                isLoading={isSubmitting}
                isDisabled={isSubmitting}
              >
                <Text textStyle='regular'>Add goal</Text>
              </SecondaryButton>
            </Flex>
          </Form>
        )}
      </Formik>

And I'm getting an error: