diff --git a/src/components/MessageList/__tests__/MessageList.test.js b/src/components/MessageList/__tests__/MessageList.test.js
index ebbcf86b5..efe309095 100644
--- a/src/components/MessageList/__tests__/MessageList.test.js
+++ b/src/components/MessageList/__tests__/MessageList.test.js
@@ -21,9 +21,9 @@ import { Chat } from '../../Chat';
 import { MessageList } from '../MessageList';
 import { Channel } from '../../Channel';
 import {
-  ComponentProvider,
   useChannelActionContext,
   useMessageContext,
+  WithComponents,
 } from '../../../context';
 import { EmptyStateIndicator as EmptyStateIndicatorMock } from '../../EmptyStateIndicator';
 import { ScrollToBottomButton } from '../ScrollToBottomButton';
@@ -55,9 +55,9 @@ const renderComponent = ({ channelProps, chatClient, components = {}, msgListPro
   render(
     <Chat client={chatClient}>
       <Channel {...channelProps}>
-        <ComponentProvider value={components}>
+        <WithComponents overrides={components}>
           <MessageList {...msgListProps} />
-        </ComponentProvider>
+        </WithComponents>
       </Channel>
     </Chat>,
   );
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index e93d756bc..40f9a7845 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -241,9 +241,9 @@ export type ComponentContextValue = {
   /** Custom UI component to display a message in the `VirtualizedMessageList`, does not have a default implementation */
   VirtualMessage?: React.ComponentType<FixedHeightMessageProps>;
   /** Custom UI component to wrap MessageList children. Default is the `ul` tag */
-  MessageListWrapper?: React.ComponentType;
+  MessageListWrapper?: React.ComponentType<PropsWithChildren>;
   /** Custom UI component to wrap each element of MessageList. Default is the `li` tag */
-  MessageListItem?: React.ComponentType;
+  MessageListItem?: React.ComponentType<PropsWithChildren>;
 };
 
 export const ComponentContext = React.createContext<ComponentContextValue>({});