Property 'row' does not exist on type '{ root: { flexDirection: "row"; borderWidth: number; borderColor: string; borderRadius: number; background...}'

[I was working on a react native project and got stuck in this error which says property does not exist on type... I am unable to change the flex direction of 'row' even though I have added it in styles.ts1 The error

  import React, {useState} from 'react';
  import { Image, View, Text } from 'react-native';
  import FontAwesome from 'react-native-vector-icons/FontAwesome';
  import QuantitySelector from '../QuantitySelector';
  import styles from './styles';

  interface CartProductItemProps {
    cartItem: {
      id: string;
      quantity: number;
      option?: string;
      item: {
        id: string;
        title: string;
        image: string;
        avgRating: number;
        ratings: number;
        price: number;
        oldPrice?: number;
      };
    };
  }

  const CartProductItem = ({cartItem}: CartProductItemProps) => {
    const { quantity: quantityProp, item } = cartItem;

const [quantity, setQuantity] = useState(quantityProp);

return (
  <View style={styles.root}>
    <View style={styles.row}>
      <Image style={styles.image} source={{uri: item.image}} />
      <View style={styles.rightContainer}>
        <Text style={styles.title} numberOfLines={3}>
          {item.title}
        </Text>
        {/* Ratings */}
        <View style={styles.ratingsContainer}>
          {[0, 0, 0, 0, 0].map((el, i) => (
            <FontAwesome
              key={`${item.id}-${i}`}
              style={styles.star}
              name={i < Math.floor(item.avgRating) ? 'star' : 'star-o'}
              size={18}
              color={'#FFDE00'}
            />
          ))}

          <Text>{item.ratings}</Text>
        </View>
        <Text style={styles.price}>
          from ${item.price}
          {item.oldPrice && (
            <Text style={styles.oldPrice}>${item.oldPrice}</Text>
          )}
        </Text>
      </View>
    </View>
    <QuantitySelector quantity={quantity} setQuantity={setQuantity} />
  </View>
);
};

export default CartProductItem;

I want to place the quantity selector of the ecommerce app below the price. Can't figure out the error in the line no. 32. the error

This is the style object code

/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
root: {
    borderWidth: 1,
    borderColor: '#d1d1d1',
    borderRadius: 10,
    backgroundColor: '#fff',
    marginVertical: 5,
},
row: {
    flexDirection: 'row',
},
image: {
    flex: 2,
    height: 150,
    resizeMode: 'contain',
},
rightContainer: {
    padding: 10,
    flex: 3,
},
title: {
    color: 'black',
    fontSize: 18,
},
price: {
    fontSize: 18,
    color: 'black',
    fontWeight: 'bold',
},
oldPrice: {
    fontSize: 12,
    fontWeight: 'normal',
    textDecorationLine: 'line-through',
},
ratingsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
},
star: {
    margin: 2,
},
});

export default styles;