How to modify the prebuilt UI of authentication in aws amplify version 6 in React Native

Question

I recently started working with React native and Aws Amplify. Can anyone help me how i can customize the SignIn Screen without disturbing the backend flow of Amplify Version 6. I am trying to do custom Ui for SignIn screen but with the new Amplify v6 Hide defaults is not working and if i override the Authenticator container login flow backend is not triggering after changing the UI.

import React from 'react';
import { Button } from 'react-native';

import { Amplify } from 'aws-amplify';
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';

import awsExports from '../aws-exports';
Amplify.configure(awsExports);

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button title="Sign Out" onPress={signOut} />;
}

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;