Why are reviews of other users getting deleted in my React rails app?

I have a project with react front end and rails backend. So according to my backend code a logged in user can delete his reviews but not the reviews of other users.currently with this code one can delete the reviews of oneself ......but when one tries to delete other peoples reviews they get deleted but on reloading the page they are back??I dont want the reviews to get deleted in the first place.... I think this is a problem in the front end but im not sure.....Also is there a way to give some msg on the front end on cliking the delete button you are not allowed to do so any alert or any msg?? pls help me out here is my code .. Backend..

    def index
        review=Review.all
        render json: review

    end
    def show
        review=Review.find(params[:id])
        render json: review

    end
    def create
        review=Review.create!(review_params)
        render json: review,status: :created


    end

    def update
        review=Review.find(params[:id])
        review.update!(review_params)
        render json: review,status: :ok

    end

    def destroy
   
        review = @current_user.reviews.find(params[:id])

        if @current_user
        review.destroy
        else
            render json: {error: "Review of someone else."}, status: :not_found
        end
    end

    private
    
    def review_params
        params.permit(:image,:date,:description,:destination,:seat,:user_id,:airline_id)

    end

backend app.js

class ApplicationController < ActionController::API
  include ActionController::Cookies
  
  rescue_from ActiveRecord::RecordInvalid, with: :render_unprocessable_entity_response

  before_action :authorize
   
    

    private
    def authorize

      @current_user = User.find_by(id: session[:user_id])
  
      render json: { errors: ["Not authorized"] }, status: :unauthorized unless @current_user
    end
  
    def render_unprocessable_entity_response(exception)
      render json: { errors: exception.record.errors.full_messages }, status: :unprocessable_entity
    end
  end

on the frontend Reviews.js

import {useParams} from "react-router-dom"
import { Link } from "react-router-dom";
import ReviewCard from "./ReviewCard";
import { useState,useEffect } from "react";
import Button from "react-bootstrap/esm/Button";
import "./Styling.css"
const Reviews = ({reviews, setReviews}) => {

  const { id } = useParams();

  useEffect(()=>{
    fetch("/reviews")
    .then(res=>res.json())
    .then(reviewData=>{
      setReviews(reviewData)
    })
  },[])

  function handleAddReviews(newReview){
    console.log("in handle add review", newReview)
    setReviews([...reviews,newReview]);
  }

  function handleDelete(id){
    let newReviews=reviews.filter(r=>r.id !== id)
    setReviews(newReviews)
  }


console.log(reviews)
  let filteredReviews = reviews.filter(review => {

    if(review.airline?.id) {
      return review.airline.id === parseInt(id);
    }

    return null;
  })

  
  return (
    <>
    <div className="reviewb">
    <Button className="reviewbuttons" variant="danger" href={"/airlines"} >Go Back</Button>
    <Button  className="reviewbuttons" variant="info" href={`/airlines/${id}/reviews/new`} >Add a Review</Button>
    </div>
      {filteredReviews.map((review) => {
        return (
          <ReviewCard key={review.id} id={review.id} review={review} handleDelete={handleDelete}  /> 
        )
      })}
    </>
  )
}

export default Reviews;

ReviewCard

import {useParams} from "react-router-dom";
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import "./Styling.css"
function ReviewCard({review,handleDelete}){
    const {id}=useParams();
    const{image,date,destination,seat,description,likes,dislikes,airline_id,user_id}=review;
   
    function handleDeleteClick() {
 
      fetch(`/reviews/${review.id}`, {
        method: "DELETE",
  
      })
      handleDelete(review.id)
      
  
    } 


    return(
        <div className="reviewcard">


        
        <img  className="cardimg" src={image} />
        <p></p>
        <h6>{date}</h6>
        <h5>{destination}</h5>
        <h5>{seat}</h5>
        <Card.Text>{description}</Card.Text>
        <Card.Title>By {review.user.name}</Card.Title>
        <p></p>
        <h6>Likes: {likes}</h6>
         <h6>Dislikes: {dislikes}</h6>

        <br/>

        <Button  className ="btn btn-success"  >👍🏻 </Button>

        <Button  className ="btn btn-danger"  >👎🏻  </Button>
        <hr />
        
        <Button  className ="btn btn-primary" onClick={handleDeleteClick}  >Delete</Button>
        
          
    
        
        </div>
    )
}
export default ReviewCard;