How to re-render a react component whenever a booking is made

        import React, {useEffect, useState} from 'react'
        import axios from 'axios'
        import '../App.css'
        import { useNavigate } from 'react-router-dom'
        import { gettingData } from '../api/getUserData'
        import { handleLogout } from '../api/handleLogout'
        import { getGroundNear } from '../api/getGroundNearby'
        import { bookingSlot } from '../api/bookingSlot'
    
    
        const Dashboard = () => {
            const navigate = useNavigate()
            const [userData, setUser] = useState(undefined)
            const [groundData, setGroundData] = useState([])
            const [currentTime, setCurrentTime] = useState(Date.now())
            const [isOccupied, setIsOccupied] = useState(false)
    
    
        axios.defaults.withCredentials = true;
    
         useEffect(()=>{
          gettingData(setUser)
        },[])
      
        useEffect(()=>{
          console.log("usee 2")
          if(userData){
            console.log(userData)
            getGroundNear(userData.pincode, 0, 50000, setGroundData) 
          }
            
        },userData)
    
      
        const handleBooking = (slotId, groundId, userId) => {
          if(bookingSlot(slotId, groundId, userId)){
            setIsOccupied(true)
          }
    
        }
    
    
      return (
        <div>
          <button onClick={() => {handleLogout(navigate)}}>Logout</button>
          
          <div>
            <h3>Grounds</h3>
            {groundData && groundData.length &&
              groundData?.map((ground)=>{
                return(
                  <div id='cards'>
                    <img src={ground.photo} alt='ground'></img>
                    <h4>{ground.ground}</h4>
                    <span>Type: </span><span>{ground.type}</span><br/>
                    <span>{ground.discription}</span>
                    
                    <div className='timings'>
                      <div className='slots'>
                        {
                        ground?.slots?.map(slot => {
                          return (
                            <>


{/*I want this component to re-render whenver the button is clicked so that it has updated views of slot booking*/}

                          <div id='slot-id'>
                            {!slot.occupied ? (
                              <button onClick={() => handleBooking(slot._id, slot.ground_id, userData._id)}>{slot.time_start} - {slot.time_end}</button>
                            ) : (
                              <button id='occupied-slot' style={{border: '3px dotted red', cursor: 'not-allowed', backgroundColor: '#FF999C'}}>{slot.time_start} - {slot.time_end}</button>
                            )}
                          </div>
                        
                        </>
                      )
                    })}
                  </div>
                </div>
              </div>
            )
          })
        }

      </div>

    </div>    
  )
}

export default Dashboard

Challenge: Re-rendering slot-id Div on Button Click in React

I’m working on a React component that displays bookable slots. Each slot has a button, and I want the entire slot-id div to re-render whenever a button is clicked.

In the provided code, the button click triggers the handleBooking function, but it doesn’t directly cause the slot-id div to re-render. This means the visual appearance won’t change unless the data source (e.g., an API call) updates the slot.occupied property outside of this component.

Desired Behavior: We want the slot-id div to re-render immediately after the button click, even if the external data source hasn’t been updated yet. This will provide a more responsive user experience by instantly reflecting the button click visually