I'm writing a test case for a feature I'm unit testing. I want to edit a text field that's embedded within several custom components but I can't figure out how to access it:

PriceOverride.test.tsx

  it('should be able to change item quantity', () =>{    const navContextValue: any = {      isFocused: () => false,      addListener: jest.fn(() => jest.fn())    };    //Mock out dependent function with jest    //Nothing here right now    //Render with the props you want    render(        <Provider store={store}><NavigationContext.Provider value={navContextValue}><PriceOverride navigation={props.navigation}/></NavigationContext.Provider></Provider>, );    //Locate screen components for test    const itemCounter = screen.queryByTestId("itemQuantity");    //Perform user actions    fireEvent.change(itemCounter, 4);   <--This is the line where I'm trying to access what I want    //Measure against expect cases    expect(itemCounter).toBe(4);  });

PriceOverride.tsx

This is the component I'm trying to access. The problem is, fireEvent.change won't work because it's a custom component. At least, I think that's why it doesn't work.

<Counter      data-testid='itemQuantity'<--data-testid is here right now      containerMargin={{ marginTop: -5 }}      defaultCounter={itemCount}      labelText={t('priceMultiple')}      onSelectCounter={itemQuantity}      min={1}    />

Counter.tsx

Inside Counter is another custom component, CustomTextField

<CustomTextField  hightAndWidth={{ height: 56, width: 67 }}  verticalMargin={{ marginVertical: 5 }}  inputTextStyle={{ textAlign: 'center', paddingTop: 13 }}  labelStyle={CommonStyle.inputLabel}  keyboardType='number-pad'  onChangeText={editedCount => processEditedCount(editedCount)}  value={counter >= 0 ? counter.toString() : ''}/>

CustomTextField.tsx

And inside CustomTextField is where the text field I want to access is:

<TextInput    {...props}    ref={props.inputRef}    onFocus={onFocus}    onBlur={onBlur}    onLayout={() => undefined}    defaultValue={props.defaultEntry}    style={[style.input, props.inputTextStyle]}  />

Error Message

When I try to run the test, I get this error:

● Price Details Test › should be able to change item quantityUnable to fire a "change" event - please provide a DOM element.  189 |  190 |     //Perform user actions> 191 |     fireEvent.change(itemCounter, 4);      |               ^  192 |  193 |     //Measure against expect cases  194 |     expect(itemCounter).toBe(4);

I can't put the data-testid property inside CustomTextField or the TextInput itself, because there's another Counter in the render of the page I'm testing. Any advice or troubleshooting would be helpful, thanks!