firebaseにデータが入らない（React×firebaseの簡単なTODOサイトを作成中）

実現したいこと

タイトルと内容を入力して投稿ボタンを押した際に、FirestoreのDatabaseにデータが入るようにしたいです。

前提

https://qiita.com/Naoya_pro/items/a42f1ecae8acce249ef3

こちらの記事を見て、React×firebaseの簡単なTODOサイトを作成しているところです。

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

FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

該当のソースコード

NewPosts.jsx

1import React from "react"; 2import { useState } from "react"; 3import { collection, addDoc } from "firebase/firestore"; 4import db from "./firebase"; 5 6const NewPost = () => { 7 const [title, setTitle] = useState(""); 8 const [content, setContent] = useState(""); 9 10 const onSubmit = async (e) => { 11 e.preventDefault(); 12 try { 13 await addDoc(collection(db, "posts"), { 14 title: title, 15 content: content, 16 created_at: new Date().getTime() 17 }); 18 setTitle(""); 19 setContent(""); 20 } catch (error) { 21 console.log(error); 22 } 23 }; 24 25 return ( 26 <> 27 <p>新規投稿</p> 28 <form onSubmit={onSubmit}> 29 <input 30 value={title} 31 type="text" 32 placeholder="タイトル" 33 onChange={(e) => setTitle(e.target.value)} 34 /> 35 <input 36 value={content} 37 type="text" 38 placeholder="内容" 39 onChange={(e) => setContent(e.target.value)} 40 /> 41 <button type="submit">投稿</button> 42 </form> 43 </> 44 ); 45}; 46 47export default NewPost;

投稿ボタンが押されたらonSubmit関数が呼び出され、addDoc関数によりfirestoreにデータが入るような仕組みです。
しかしcatchに引っ掛かり、error文が出力されます。

試したこと

firestoreのCloud Databaseにコレクションを予め追加してみたが、特に変わらず。
より簡単なデータをデータベースに挿入するコンポーネントを作成し、テストしようとしたがそもそも作れず。

補足情報（FW/ツールのバージョンなど）

Cloud Firestoreのルール設定はこうなっております。

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } }

わかる方いたら教えていただけると幸いです。