ReactでポーリングするProvider情報取得

実現したいこと

React初心者です。
コンポーネントを跨ぐ値の状態監視を行いたい為、Providerに切り出した共通部品(ポーリング)で
値を取得したいです。

ここに実現したいことを箇条書きで書いてください。

前提

ReactのProvider、Contextの概念理解が浅く、使い方(外部IF含む)がそもそも間違っているかも知れません。
そもそもContextでは静的値(可変では無い)しか取り扱えないものでしたら、申し訳ありません。

発生している問題・エラーメッセージ

エラーは発生していないが、ポーリング処理が実行されていない様に感じる(BreakPoint,Logより)。

該当のソースコード

TypeScript(JSX)

1■外部から呼び出し部( コンポーネント①②共に同じロジック)2const [data, setData] = React.useState<Chat[]>([]); ←下部の「React.createContext<Chat[]>([]);」の初期化時の空配列しか入って来ない 3 4 5■Providerクラス(chat.provider.tsx)6import React from "react";7import axios from "axios";8 9export interface Chat {10 chatId: number;11 chatUserId: number;12 chatName: string;13}14 15const ChatContext = React.createContext<Chat[]>([]);16 17export function ChatProvider( props: {children: React.ReactNode;}){18 19 const [chat, setChat] = React.useState<Chat[]>([]);20 21 //■検索ロジック22 const search = async () => {23 const response = await(async () => {24 const result = await axios.get<Chat[]>('http://localohost:8081/chats/check');25 switch(result.status) {26 case 200:27 return result;28 default:29 return "失敗";30 }31 })();32 33 if (typeof response === "string") {34 console.error(response);35 return;36 }37 // State更新38 setChat(response.data);39 console.log("[GET]チェック"); // TODO ポーリング確認用消す40 }41 42 React.useEffect(() => { // ←ここでポーリングを試みているが１度もsearch()が呼ばれていない。43 // ３秒毎にチェック44 const interval = setInterval(async() => {45 await search();46 }, 3000);47 return () => clearInterval(interval);48 });49 50 return <ChatContext.Provider value={chat}>{props.children}</ChatContext.Provider> 51}52// ChatProviderの外部IF53export function useChat(){54 const chat = React.useContext(ChatContext);55 return {data: chat};56}57 58

試したこと

このポーリングしていたロジックをコンポーネント①でべたに書いていた(Context不使用)時は正しく動作していました。