React JS Props not updating

Question

In the code below when I change the state of pendingCount the first key prop changes but the one inside the < Pending/> does not. Why is that?

         <div>
            <motion.p
                key={pendingCount}
                whileHover={{textDecoration:"underline"}}
                style={{cursor:"pointer"}}
                onClick={ ()=>{ render(<Pending key={pendingCount} data={AllPendingsData}/>) } }
                className="position-relative d-inline-block pe-3"
            >
                Pending Requests
                <span className="badge rounded-pill bg-dark ms-2">
                    {pendingCount}
                </span>
            </motion.p>
        </div>

There is one more thing that I want to add that is that what I wanted to do was to re-render the < Pending/> when its props changes. Changing the key prop was one of the suggested way that I found on the internet for this but it is not working for me. So is there any better or preferred way to do for a functional component?

Answer 1

The problem was the onClick just as Drew Reese mentioned. Props are causing updates but only when user clicks the element. So instead of passing the data as prop I used useContext hook which solved my problem.