react firebase documentのリアルタイム削除

前提・実現したいこと

firebaseのdocumentを削除したときリアルタイムでカードを削除したい

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

更新しないと削除できない

該当のソースコード

import { Box, Button, Flex, Input,Stack,Textarea ,Wrap } from "@chakra-ui/react";
import { collection,  addDoc,  getDocs, orderBy, limit, deleteDoc, doc } from "firebase/firestore";
import { memo, useCallback, useEffect, useState } from "react"
import { UserCard } from "../components/UserCard"
import {  db } from "../service/firebase";
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'

export const Home = memo(() => {
    const [title,setTitle] = useState('');
    const [content,setContent] = useState('');
    const [texts,setTexts] = useState([])
    
    const changeTitle = (e) => setTitle(e.target.value)
    const changeContent = (e) => setContent(e.target.value)

    useEffect(async() =>{
        const textData = collection(db,'texts');
        getDocs(textData,orderBy('createdAt'),limit(50)).then((snapShot)=> {
            setTexts(snapShot.docs.map((doc)=>({...doc.data(),id:doc.id})))
        })
     
    },[])

    const DeleateHandle = useCallback(async(id) => {
      const textDocumentRef = doc(db,'texts',id)
      await deleteDoc( textDocumentRef)
    
    })
    
   const ADDdocRef =async () => { 
       await addDoc(collection(db,'texts'),{
       title,
       content,
       createdAt:firebase.firestore.FieldValue.serverTimestamp(),
       
   })
   setTexts([...texts,{title,content}])
   setTitle('')
   setContent('')
}


    
    return (
        <>
        
        <Flex  align='center' justifyContent='center'>
            <Box p={4} >
            <Stack>
            <Input placeholder="title"value={title} bg='white'onChange={changeTitle}/>
            <Textarea  placeholder="content"value={content} bg='white'onChange={changeContent}/>
            <Button  onClick={ADDdocRef}>追加</Button>
            </Stack>
            </Box>
        </Flex>
        <Wrap spacing='10px'>
        {texts.map((text,index) =>(
           
            <UserCard key={index} title={text.title} content={text.content} onClick={()=>DeleateHandle(text.id)}/>
          
        ))}
       </Wrap>
        </>
    )
})

import { Box, Stack, Text, VStack, Wrap, WrapItem } from "@chakra-ui/layout"
import { Button, Checkbox } from "@chakra-ui/react";
import { memo } from "react";


export const UserCard = memo((props) => {
     const {title,content,onClick} = props;
   
    return(
        <Wrap p={{base:4,md:10}}>
          <WrapItem mx='auto'>
            <VStack>
             <Checkbox >完了</Checkbox>
              <Box 
                w='260px' 
                h='260px' 
                bg='teal.200' 
                borderRadius='10px' 
                shadow='md'
                p={4}
             >
               <Stack textAlign='center'>
                 <Text fontSize='lg' fontWeight='bold'>{title}</Text>
                 <Text fontSize='lg' fontWeight='bold'>12/5</Text>
                 <Text fontSize='lg' fontWeight='bold'>{content}</Text>
               </Stack>
              </Box>
             <Button onClick={onClick}>削除</Button>
           </VStack>
        </WrapItem>
    </Wrap>
    )
})