docs: update extending docs (react-native-elements#3642)

website/docs/customization/0.index.mdx

@@ -130,6 +130,10 @@ const App = () => {
 };
 ```
 
+:::note
+If you do not specify `theme` in ThemeProvider, it would use [defaultTheme](./customization/theme_object#default-light-colors)
+:::
+
 ### Order of Styles
 
 What happens now if we want a `Button` that isn't raised? To do that we have to understand the order in which styles are applied.

website/docs/customization/1.themeprovider.mdx

@@ -31,6 +31,10 @@ const App = () => {
 };
 ```
 
+:::note
+If you do not specify `theme` in ThemeProvider, it would use [defaultTheme](./theme_object#default-light-colors)
+:::
+
 The example above achieves the same goals as the first example — apply the same
 styles to multiple instances of `Button` in the app. However this example
 applies the `raised` prop to every instance of `Button` inside the component

website/docs/customization/3.typescript.mdx → website/docs/customization/3.extending.mdx

@@ -111,25 +111,27 @@ const App = () => {
 
 ### Using the theme in your own components
 
-You may want to make use of the theming utilities in your own components. For this you can use the `withTheme` HOC exported from this library. It adds three props to the component it wraps - theme, updateTheme and replaceTheme.
+You may want to make use of the theming utilities in your own components. For this you can use the `withTheme(Component,ComponentThemeKey)` HOC exported from this library. It adds three props to the component it wraps - theme, updateTheme and replaceTheme.
 
 ```tsx
 import { withTheme } from '@rneui/themed';
 
-type MyCustomComponentProps = {
+type CustomComponentProps = {
   title: string;
   titleStyle: StyleProps<TextStyle>;
 };
 
-export const MyCustomComponent = withTheme<MyCustomComponentProps>((props) => {
+const CustomComponent = (props: CustomComponentProps) => {
   // Access theme from props
   const { theme, updateTheme, replaceTheme } = props;
   // ...
-});
+};
+
+export default withTheme<CustomComponentProps>(CustomComponent, 'ComponentKey');
 
 declare module '@rneui/themed' {
   export interface ComponentTheme {
-    MyCustomComponent: Partial<MyCustomComponentProps>;
+    ComponentKey: Partial<CustomComponentProps>;
   }
 }
 ```
@@ -139,7 +141,7 @@ import { ThemeProvider, createTheme } from '@rneui/themed';
 
 const myTheme = createTheme({
   components: {
-    MyCustomComponent: {
+    ComponentKey: {
       titleStyle: {
         color: 'red',
       },
@@ -150,8 +152,14 @@ const myTheme = createTheme({
 const App = () => {
   return (
     <ThemeProvider theme={myTheme}>
-      <MyCustomComponent title="My Component" />
+      <CustomComponent title="My Component" />
     </ThemeProvider>
   );
 };
 ```
+
+:::info
+
+Theme Key for custom component must be unique
+
+:::