Remove item from screen after delete - reactjs

Question

I had this working with react app but I am porting the project to next.js and it doesn't work for some reason. I am using SWR
Custom hook:
import axios from "axios";
import useSwr from "swr";
export const useHttp = (url, token) => {
const fetcher = (url, token) =>
axios
.get(url, { headers: { Authorization: "Bearer " + token } })
.then((res) => res.data);
const { data, error } = useSwr(token ? [url, token] : null, fetcher);
return {
data: data,
isLoading: !error && !data,
isError: error,
};
};
In my page
const { data, isError, isLoading } = useHttp(
`http://localhost:8000/api/admin/bookings/${id}`,
session.user.servertoken
);
const deleteBooking = async (id) => {
//immediatly remove record from the screen before getting response from the server
mutate(
[
`http://localhost:8000/api/admin/bookings/${id}`,
session.user.servertoken,
],
data.filter((d) => d._id !== id),
false
);
try {
const response = await axios.delete(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/admin/bookings/${id}`,
{ headers: { Authorization: "Bearer " + session.user.servertoken } }
);
mutate([
`http://localhost:8000/api/admin/bookings/${id}`,
session.user.servertoken,
]);
} catch (err) {
console.log(err);
}
};
The button:
<Button
variant="danger"
onClick={() => deleteBooking(d._id)}
>
Delete
</Button>
Absolutely nothing happens in terms of the ui though (record IS deleted in database). The record should disappear from the screen once I click on delete and the deleteBooking function runs.
*If I add this to my deleteBooking function it shows the correct data:
const filteredData = data.filter((d) => d._id !== id);