title: when i press the delete button the react rerender (refresh) the whole page and it doesn't delete the data from the firebase
body: <p>&quot;error message&quot;</p>
  <p>^[2022-07-12T08:30:42.648Z]</p>
  <p>@firebase/firestore: Firestore (9.8.4): Connection WebChannel transport errored:</p>
  <p>Wd {type: 'c', target: Y, g: Y, defaultPrevented: false, status: 1}</p>
  <p>after I clicked the button the id from the Onclick function is matches with the id I want to delete but it doesn't delete the data from firestore and the react refreshes automatically.</p>
  <pre><code>import React from &quot;react&quot;;
  import { db } from &quot;../utils/firebase&quot;;
  import { deleteDoc, doc } from &quot;firebase/firestore&quot;;
  import Book from &quot;./Book&quot;;
  
  const ReadOnlyBook = (props) =&gt; {
   
      //delete
      const handleDelete = async (id) =&gt; {
          const taskDocRef = doc(db, 'Book_details', id)
          try {
              await deleteDoc(taskDocRef)
          } catch (err) {
              alert(err)
          }
      }; 
      
  
      return (
          &lt;tr&gt;
              &lt;td&gt;{props.book.data.Book_ID}&lt;/td&gt;
              &lt;td&gt;{props.book.data.Book_name}&lt;/td&gt;
              &lt;td&gt;{props.book.data.Author}&lt;/td&gt;
              &lt;td&gt;{props.book.data.Category}&lt;/td&gt;
              &lt;td&gt;{props.book.data.Edition}&lt;/td&gt;
              &lt;td&gt;{props.book.data.Location_rack}&lt;/td&gt;
              &lt;td&gt;{props.book.data.ISBN}&lt;/td&gt;
              &lt;td&gt;{props.book.data.No_of_copies}&lt;/td&gt;
              &lt;td&gt;
                  &lt;button onClick={() =&gt;
                      props.handleEdit(
                          props.book.id,
                          props.book.data.Book_ID,
                          props.book.data.Book_name,
                          props.book.data.Author,
                          props.book.data.Category,
                          props.book.data.Edition,
                          props.book.data.Location_rack,
                          props.book.data.ISBN,
                          props.book.data.No_of_copies
                      )
                  }
                  &gt;
                      Edit
                  &lt;/button&gt;
         
              &lt;/td&gt;
              &lt;td&gt;  
                  &lt;button onClick={()=&gt;handleDelete(props.book.id)}&gt;{props.book.id}&lt;/button&gt; 
              &lt;/td&gt;
          &lt;/tr&gt;
      );
  };
  
  export default ReadOnlyBook;
  </code></pre>