No overload matches this call error in TouchableOpacity style

Question

have some problem with TouchableOpacity styles.

When I add alignSelf , alignItem or JustifyContent, I get the next error:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: TouchableOpacityProps | Readonly<TouchableOpacityProps>): TouchableOpacity', gave the following error.     Type '{ backgroundColor: string; alignSelf: string; alignItems: string; justifyContent: string; height: number; width: number; marginBottom: number; borderColor: string; borderRadius: number; shadowColor: string; shadowOffset: { ...; }; shadowOpacity: number; shadowRadius: number; elevation: number; }' is not assignable to type 'StyleProp<ViewStyle>'.       Type '{ backgroundColor: string; alignSelf: string; alignItems: string; justifyContent: string; height: number; width: number; marginBottom: number; borderColor: string; borderRadius: number; shadowColor: string; shadowOffset: { ...; }; shadowOpacity: number; shadowRadius: number; elevation: number; }' is not assignable to type 'ViewStyle'.         Types of property 'alignItems' are incompatible.           Type 'string' is not assignable to type 'FlexAlignType | undefined'.   Overload 2 of 2, '(props: TouchableOpacityProps, context: any): TouchableOpacity', gave the following error.     Type '{ backgroundColor: string; alignSelf: string; alignItems: string; justifyContent: string; height: number; width: number; marginBottom: number; borderColor: string; borderRadius: number; shadowColor: string; shadowOffset: { ...; }; shadowOpacity: number; shadowRadius: number; elevation: number; }' is not assignable to type 'StyleProp<ViewStyle>'.  index.d.ts(5031, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>' index.d.ts(5031, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableOpacity> & Readonly<TouchableOpacityProps> & Readonly<...>'

I've tried to put these 3 styles to view, and get the same error...

Here is my ts component

import React, {FC, ReactElement} from 'react';
import {Text, TouchableOpacity} from 'react-native';
import {BORDER_RADIUS, DIMENSIONS, SHADOW, TEXT_BASE} from '../../theme/theme';
import {Colors} from '../../theme/colors';

interface Props {
  buttonText: string;
  onPress: () => void;
}

const SubmitButtonPink: FC<Props> = (props): ReactElement => {
  const {buttonText, onPress} = props;
  return (
    <TouchableOpacity style={styles.enabled} onPress={onPress}>
      <Text style={styles.textStyle}>{buttonText}</Text>
    </TouchableOpacity>
  );
};

const styles = {
  enabled: {
    ...SHADOW.small,
    backgroundColor: Colors.mainColor,
    alignSelf: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    height: 50,
    width: DIMENSIONS.width * 0.7,
    marginBottom: 15,
    borderColor: Colors.borderColor,
    borderRadius: BORDER_RADIUS.large,
  },
  textStyle: {
    ...TEXT_BASE.textBold,
    color: Colors.white,
  },
};

export default SubmitButtonPink;

Any idea why it's happens ?