useReducer useContext で管理したステートを変更しても、再度レンダリングされない

実現したいこと

発生している問題・分からないこと

Reducerのstateとdispachを呼び出せるカスタムhookを作り、そのhookを介してstate（カードの情報）の中身をmapで展開している。
しかし、dispachでstateに対して 追加 削除 編集 のようなアクションを実施しても、変更した結果が反映されない。
画面更新すると反映される。

エラーメッセージ

error

1window is not defined 2ローカルストレージに値を保存しており、関連するエラーが出ていますが 今回の不具合とは直接関係ないものと推測しています。

該当のソースコード

TypeScript

1// カードの情報のstateと 情報変更用のdispatch を返す hooks2export const useCards = () => {3 const strageCards = getLocalStrage("cards");4 const defaultCards: Card[] = strageCards ? strageCards : [];5 const [cards, cardsDispatch] = useReducer(cardsReducer, defaultCards);6 7 return { cards, cardsDispatch };8};

TypeScript

1// カード情報をmapで展開している2export default function Home() {3 const { cards } = useCards();4 5 return (6 <div className="flex w-full flex-wrap gap-2">7 {cards &&8 cards.map((card) => (9 <React.Fragment key={card.id}>10 <Card id={card.id}>{card.text}</Card>11 </React.Fragment>12 ))}13 </div>14 );15}

TypeScript

1// カードコンポーネント2// コンポーネントからカードの削除ができるが、ここで削除してもリアルタイムでデータが反映されない3function Card({ id, children }: { id: number; children: string }) {4 const [isEdit, setIsEdit] = useState<boolean>(false);5 const { cardsDispatch } = useCards();6 7 return (8 <div className="h-[200px] w-[200px] bg-yellow-200 p-2">9 <div>{id}</div>10 <div className="h-[139px] w-[168px] text-xs text-black">11 {isEdit ? (12 <textarea 13 autoFocus={true}14 onBlur={(e) => {15 setIsEdit(false);16 cardsDispatch({17 type: "UPDATE",18 payload: {19 id: id,20 text: e.target.value,21 },22 });23 }}24 />25 ) : (26 <div onClick={() => setIsEdit(true)}>{children}</div>27 )}28 </div>29 <button 30 onClick={() =>31 cardsDispatch({32 type: "DELETE",33 payload: {34 id: Number(id),35 },36 })37 }38 >39 <Delete />40 </button>41 </div>42 );43}44 45export default Card;

試したこと・調べたこと

上記の詳細・結果

• 検索
  • 状態管理フレームワークを使った事例は出てきましたが、useReducer useContext を使った不具合事例が見つかりませんでした。

補足

よろしくお願いいたします。