Delete mapping is not working from UI but working through Postman

export default function Cart()
{  const username=localStorage.getItem("username");
    const [data,setdata]=useState([]);
    const [amount,setAmount]=useState(0);
    const items=data.map((item)=>{
        return(
            <div key={item.name}>
            <h1>{item.name}</h1>
            <h5>{item.price}&#8377;</h5>
            <h5>{item.quantity}</h5>
            <Button onClick={()=>handlepayment(item.price,item.name,item.username)}>Make payment</Button>
            </div>
        )
    })
    
    function handlepayment(price,name,username)
    {
      console.log(`price=${price}, name=${name} , username=${username}`)
      if(amount<price)
      {
        alert("insufficient balance");
        return;
      }
      const url=`http://localhost:8080/cartproducts/${username}/${name}}`;
      fetch(url, { method: 'DELETE' })
      .then((response) => {
        if (!response.ok) {
          alert("something is wrong");
          throw new Error("Invalid credentials");
        }
        return response.json();
      })
  .then((data) => {console.log(data);
    updateamount(price);
  })
  .catch(error => console.error(error));

    }

The above is my react code so simply clicking on makepayment button takes three values as arguments and in the delete method in the url username and name will be shown . Ignore console.log statements those were written for debugging just to make know whether correct values are passed or not.

Below is the controller ignore the print statements those are for debugging

@RestController
@RequestMapping("/")
@CrossOrigin

public class FoodItemController {
    @Autowired
    private FoodItemService service;
@DeleteMapping("/cartproducts/{username}/{name}")
 public ResponseEntity<Map<String,String>> deletefooditem(@PathVariable String username, @PathVariable String name)
 {
     System.out.println("inside deletefooditem"+"username="+username+" "+"name="+name);
     
     Map<String,String> response=new HashMap<>();
     if(service.deletefooditem(username,name))
     {
     response.put("successfully", "deleted");
     return new ResponseEntity<>(response,HttpStatus.OK);
     }
     else {
         response.put("something is wrong", "not deleted");
         return new ResponseEntity<>(response,HttpStatus.BAD_REQUEST);
     }
 }
}

Below is the service layer

public boolean deletefooditem(String username,String name)
{
    System.out.println("inside service"+"username="+username+" "+"name="+name);
    FoodItems masteritem=repo.findByUsernameAndName(username,name);
    if(masteritem!=null)
    {
    repo.delete(masteritem);
    return true;
    }
    return false;
}

Below is the repo layer

public interface FoodItemrepo extends JpaRepository<FoodItems, Integer> {
    List<FoodItems> findAllByUsername(String username);
    FoodItems findByUsernameAndName(String username,String name);
}

Below is the model class

@Entity
public class FoodItems {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int Id;
    private String name;
    private String username;
   private int price;
   private int quantity;

I have applied all the annotations required which I didnot mention here like @Autowired,@RestController,@Service,@Repository.

The problem is coming at the service layer. It’s not able to find the data from database using findBy method mentioned. But using postman i’m not facing any problem like the data is getting deleted. If i use the findByUsernameAndName in another method name additem which I have mentioned below there it’s working as expected when I have hit from UI.

@Transactional
public void additem(FoodItems item)
{
    String username=item.getUsername();
    String name=item.getName();
    FoodItems fooditem=repo.findByUsernameAndName(username,name);
    System.out.println(fooditem);
    if(fooditem!=null)
    {
        
        item.setQuantity(item.getQuantity()+fooditem.getQuantity());
        item.setPrice(item.getQuantity()*item.getPrice());
        repo.save(item);
        repo.delete(fooditem);
    }
    repo.save(item);
}

This is where I was stuck like the username and name fields sent were correct and I have checked them in the service layer too. But the object which is going to get created is null everytime. Could someone please help me with this.