Tooltip view is not being set properly with Parent and Child components.

As of now, I am trying to use it in the Parent component for orders 1, 2 and later for the rest of the orders I am trying to use it with the child component.

<CopilotStep
          text=""
          order={3}
          name="childhere"
        >
          <WalkthroughableView style={{ flex: 0.4, alignItems: 'center', justifyContent: 'center' }}>
              <TouchableOpacity onPress={onPressChildItem}>
                <Text style={styles.buttonLabel}>{"here"}</Text>
              </TouchableOpacity>
          </WalkthroughableView>
        </CopilotStep>

But here it is not getting fit as per the screenshot.

here is my custom tooltip component view:

<View style={{ height: 150, justifyContent: 'center', alignItems: 'center', width: width / 1.25, alignSelf: 'center' }}>
        {childeren_data}
        </View>

here is my copilotProvider:

<CopilotProvider
            overlay="svg"
            stepNumberComponent={StepNumberComponent}
            tooltipComponent={InteractiveToolTip}
            backdropColor="rgba(6, 4, 3, 1)"
            tooltipStyle={{ backgroundColor: 'rgba(34, 48, 52, 0.65)', width: width - 10 }}
            arrowColor="rgba(3, 6, 6, 0.9)"
            animated
        >
       {<Navigator />}
</CopilotProvider>

If anyone can help me out on this would be really appreciated. Thanks in Advance.

Start by reproducing the Parent and Child component walkthrough using the CopilotStep and WalkthroughableView example, then inspect the custom InteractiveToolTip rendered through CopilotProvider. Check how the tooltipStyle, fixed height, width, and child content interact with the step order and compare the result with the reported screenshot. Done means the tooltip is positioned and sized correctly for both parent and child steps.