ScrollView component direction prop is not reflecting

Im trying to implement horizontal scroller for products in checkout extensions fro thank you page , im using ScrollView and direction=”inline” to make it scroll horizonatlly ,
but in Frontend , its still stacked along vertically ,
is this known issue or am i using the component wrong .

<ScrollView maxInlineSize="fill" maxBlockSize={400} direction="inline">

    {

      data.map((product) => (

        <View inlineSize={300} maxBlockSize={200} key={product.id}>

          <Image source={product.media.nodes\[0\].previewImage.url}></Image>

          <Text>{product.title}</Text>

        </View>

      ))

    }

  </ScrollView>