Type '{ children: Element; }' has no properties in common when create custom component

I'm trying to create a custom button for my app to use later, it look like this

const BUTTON_SHAPE: ViewStyle = {  borderRadius: 30,  alignItems: 'center',  justifyContent: 'center',};export interface AppButtonProps {  style?: ViewStyle;  child?: Element | React.ReactNode;}const AppButton = (props: AppButtonProps) => {  const {style, child} = props;  return (<TouchableOpacity style={[style, BUTTON_SHAPE]}>{child}</TouchableOpacity>  );};export default AppButton;

But. when i use this in App:

<ViewContainer style={{alignItems: 'center', justifyContent: 'center'}}><AppButton><Text>Hello</Text></AppButton><AppText>Login</AppText></ViewContainer>

It show error:

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & AppButtonProps'

How can i fix this, what did i do wrong? Please help, thank you a lots