React & TypeScript: How to use Context API and useReducer with Firestore Database?

import React, { createContext, useReducer, Reducer, useEffect } from 'react';import { db } from './firebase';// Create a context for the productsexport const ProductsContext = createContext<{  products: Product[];  dispatch: React.Dispatch<ProductAction>;}>({  products: [],  dispatch: () => {},});// Define the types for the state and actionstype Product = {  id: string;  name: string;  price: number;};type ProductAction =  | { type: 'ADD'; product: Product }  | { type: 'DELETE'; id: string }  | { type: 'UPDATE'; id: string; product: Product }  | { type: 'SET'; products: Product[] };// Define the reducer functionconst productsReducer: Reducer<Product[], ProductAction> = (state, action) => {  switch (action.type) {    case 'ADD':      return [...state, action.product];    case 'DELETE':      return state.filter((product) => product.id !== action.id);    case 'UPDATE':      return state.map((product) =>        product.id === action.id ? action.product : product      );    case 'SET':      return action.products;    default:      return state;  }};// Create a provider component for the products contextconst ProductsProvider: React.FC = ({ children }) => {  const [products, dispatch] = useReducer(productsReducer, []);  // Load the products from the Firestore database when the component mounts  useEffect(() => {    const unsubscribe = db.collection('products').onSnapshot((snapshot) => {      const products: Product[] = [];      snapshot.forEach((doc) => {        products.push({ id: doc.id, ...doc.data() });      });      dispatch({ type: 'SET', products });    });    // Unsubscribe from the snapshot listener when the component unmounts    return () => unsubscribe();  }, []);  // Return the products context provider with the current state and dispatch function  return (    <ProductsContext.Provider value={{ products, dispatch }}>      {children}      ...