I have a friend request component which maps a list of requests and creates a div with two buttons to accept and reject a request, I want to optimistically remove each request when the user presses either button, i have attempted to use "useOptimistic" however because its not in a form, i consistently get the console error

An optimistic state update occurred outside a transition or action

. Once the action to accept/reject is complete the path revalidates, currently im using a useState to optimistically update the list, i assume once the path is revalidated the state will be updated with the optimistic data, my questions are: is this a good and nice practice or should i really be using useOptimistic, and if i should be using useOptimistic, how should i structure the component to get around the form issue ?
code > https://pastebin.com/MbbMbDwM