TypeError: Cannot read properties of null (reading 'add')を改善したい

Question

解決したいこと

検証ツールに、表示される『TypeError: Cannot read properties of null (reading 'add')』を改善したいです。

試したこと
エラーメッセージを見ると、「null のプロパティは読めません（add を読むとき）。」で、
この場合、firestore が null の可能性が高いので、
『firestore が正しくインスタンスされているかを確認する』とまではわかるのですが、
下記のコードを何を書き換えたら、firesotreが正しくインスタンスされるのかがわかりません。

何方かアドバイスをお願いします。

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};

export const firebaseApp = initializeApp(firebaseConfig);
export const auth = getAuth(firebaseApp);
export const firestore = getFirestore(firebaseApp);

import React, { useContext, useState } from "react";
import { connect } from "react-redux";
import { addTodos } from "../redux/reducer";
import { Box, TextField, Button } from "@mui/material";
import { AuthContext } from "../auth/AuthProvider";
import { useFirestoreConnect, useFirestore } from "react-redux-firebase";

const mapStateToProps = (state) => {
  return {
    todos: state?.todos,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    addTodo: (obj) => dispatch(addTodos(obj)),
  };
};

const Todos = (props) => {
  const { count, setCount } = props;
  const [todo, setTodo] = useState("");
  // Contextからログインユーザを取得
  const { currentUser } = useContext(AuthContext);

  const handleChange = (e) => {
    setTodo(e.target.value);
  };

  const [num, setNum] = useState(100);

  const firestore = useFirestore();
  const onCountUp = () => {
    setCount(count + num);
//エラーの該当箇所
    return firestore.add("senders", {
      idCount: 1,
      item: todo,
      count: 0,
    });
  };
  const onCountDown = () => {
    setCount(count - num);
    return firestore.add("senders", {
      idCount: 1,
      item: todo,
      count: 0,
    });
  };
  useFirestoreConnect({
    collection: "senders",
    where: [["todo", "==", "0"]],
  });

  const addTodo = () => {
    return firestore.add("addTodo", {
      idCount: 1,
      item: todo,
      completed: false,
      balance: 0,
    });
  };
  useFirestoreConnect({
    collection: "addTodo",
    where: [["todo", "==", "0"]],
  });

  const add = () => {
    if (todo === "") {
      alert("Input is Empty");
    } else {
      props.addTodo({
        id: Math.floor(Math.random() * 1000),
        item: todo,
        completed: false,
        balance: 0,
      });
      setTodo("");
    }
  };

  return (
    <>
      <div style={{ textAlign: "center" }}>
        <div className="balance-list">
          <h2>
            {currentUser?.displayName ?? "未ログイン"}
            さんの残高 : {count} 円{" "}
          </h2>
          <Box
            component="form"
            sx={{
              "& > :not(style)": { m: 1, width: "25ch" },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField
              label="入出金額"
              variant="outlined"
              value={num}
              onChange={(e) => setNum(Number(e.target.value))}
            />
          </Box>
          <Button onClick={onCountUp} variant="outlined" color="primary">
            Increment
          </Button>
          <Button onClick={onCountDown} variant="outlined" color="secondary">
            Decrement
          </Button>
        </div>
        <div className="addTodos">
          <h2>受取人一覧</h2>
          <Box
            component="form"
            sx={{
              "& > :not(style)": { m: 1, width: "25ch" },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField
              id="outlined-basic"
              label="受取人を入力してください"
              variant="outlined"
              type="text"
              onChange={(e) => handleChange(e)}
              className="todo-input"
              value={todo}
            />
          </Box>
          <Button
            variant="outlined"
            color="primary"
            className="add-btn"
            onClick={() => add()}
          >
            受取人追加
          </Button>
          <br />
          <h2>受取人名</h2>
        </div>{" "}
      </div>
    </>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(Todos);