reactjs - コントローラーでラップした後、テストファイルでdata-testidが認識されませんか?

Question

こんにちは、react-hook-form のコントローラでラップされたコンポーネントに入力フィールドがあり、その入力フィールドはマスキングのために react-input-mask でラップされています。入力フィールドをコントローラでラップする前に、data-test-id が機能します良い 。ラップした後、それを見つけることができません。ここでは、そのための入力フィールド コンポーネントとテスト ファイルを共有しています。

             <Controller
                      name="dob"
                      control={control}
                      as={
                        <InputMask mask="9999-99-99" >
                          {() => (
                            <TextField
                              id="inputfive"
                              name="dob"
                              label={t("TXT.YOUR_LOAN_DETAIL_PAGE.DOB")}
                              placeholder={t("TXT.YOUR_LOAN_DETAIL_PAGE.DOB")}
                              data-testid="dob-input"
                            />
                          )}
                        </InputMask>
                      }
                      rules={{
                        required: "this is required",
                        pattern: {
                          value: /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/,
                          message: "Please Enter a correct pattern"
                        }
                      }}
                    />

テストファイル内:

it("should not sumbit the form", async () => {
  const onSubmit = jest.fn();
  const { getByText, getByTestId } = render(<LinkApplication onSubmit={onSubmit} />);

  const Dob_Input = getByTestId("dob-input");
  const form = getByTestId("form");
  act(() => {
    fireEvent.change(  Dob_Input , {
      target: { value: "1995-09" }
    });
  });
  expect(Dob_Input.value).toBe("1995-09");


  await act(() => {
    fireEvent.submit(form);
  });

expect(onSubmit).not.toHaveBeenCalled();
});

エラー：

Unable to find an element by: [data-testid="dob-input"]