No overload matches this call Typescript on Button in React native

I have my Welcome.tsx file:

import React from 'react';import {View, StyleSheet, Text, Button, TouchableOpacity} from 'react-native';import Icon from 'react-native-vector-icons/Feather';const WelcomeScreen: React.FC<{}> = () => {  return (<View style={styles.container}><View style={styles.logo}><Icon size={150} color="black" name="book-open" /><Text style={styles.logoText}>Book Worm</Text></View><View style={styles.divider}><TouchableOpacity><Button title="Login" color="black" style={styles.btn} /></TouchableOpacity><TouchableOpacity><Button title="Sign-up" color="black" style={styles.btn} /></TouchableOpacity></View></View>  );};const styles = StyleSheet.create({  container: {    flex: 1,  },  logo: {    flex: 1,    borderWidth: 1,    alignItems: 'center',    justifyContent: 'center',  },  logoText: {    fontSize: 50,    fontWeight: '100',  },  divider: {    flex: 1,    borderWidth: 1,  },  btn: {    borderWidth: 1,    borderColor: 'black',    backgroundColor: 'black',  },});export default WelcomeScreen;

As you can see it pretty normal. However, Visual Studio code is highlighting style property and is throwing the following error:

No overload matches this call.  Overload 1 of 2, '(props: ButtonProps | Readonly<ButtonProps>): Button', gave the following error.    Type '{ title: string; color: string; style: { borderWidth: number; borderColor: string; backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes & 

Here's the image:

Any idea what's causing this overload matches call? been wondering for a couple times this happened.