reactのuseEffectでのcleanupがうまくいかず、「Warning」が出る

Question

前提・実現したいこと

コンポーネントがunmountされた後に参照されるのを防ぎたい。

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

reactとfirebaseで作っているアプリで、会員認証機能を作成しているのですが、ログインのボタンをクリックした際に、consoleにて以下のエラーが発生します。

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in Login (created by Context.Consumer)
    in Route (at App.jsx:30)

ググってみた限り、useeffectでのクリーンアップ関数関連の問題で、コンポーネントが破棄された後に参照されている(?)からエラーが起きているようです。

該当のソースコード

すみませんuseefectがうまくいかないというタイトルですが、そもそも今回の場合、どのようにしてuseeffectを使ってクリーンアップすれば良いのかがわかりません。

import React, { useRef, useState, useEffect } from "react"
import { Form, Button, Card, Alert } from "react-bootstrap"
import { useAuth } from "../contexts/AuthContext"
import { Link, useHistory } from "react-router-dom"

export default function Login() {
  const emailRef = useRef()
  const passwordRef = useRef()
  const { login } = useAuth()
  const [error, setError] = useState("")
  const [loading, setLoading] = useState(false)
  const history = useHistory()

  async function handleSubmit(e) {
    e.preventDefault()

    try {
      setError("")
      setLoading(true)
      await login(emailRef.current.value, passwordRef.current.value)
      history.push("/")
    } catch {
      setError("ログインに失敗しました")
    }

    setLoading(false)
  }
  
  return (
    <>
      <Card>
        <Card.Body>
          <h2 className="text-center mb-4">ログイン</h2>
          {error && <Alert variant="danger">{error}</Alert>}
          <Form onSubmit={handleSubmit}>
            <Form.Group id="email">
              <Form.Label>Email</Form.Label>
              <Form.Control type="email" ref={emailRef} required />
            </Form.Group>
            <Form.Group id="password">
              <Form.Label>パスワード</Form.Label>
              <Form.Control type="password" ref={passwordRef} required />
            </Form.Group>
            <Button disabled={loading} className="w-100" type="submit">
              ログインする
            </Button>
          </Form>
          <div className="w-100 text-center mt-3">
            <Link to="/forgot-password">パスワードを忘れた場合はこちら</Link>
          </div>
        </Card.Body>
      </Card>
      <div className="w-100 text-center mt-2">
        アカウントがない場合は? <Link to="/signup">サインアップ</Link>
      </div>
    </>
  )
}

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

ライフサイクルやfirebase、そもそもJavaScriptについて無知なのは重々承知ですが、ご教授お願いいたします。