react axios delete got error,how could i fix it?

Question

i am using Php api to fetch the data from mysql, and using postman to check and was all passed, and i am use react as front end , currtnly only delete is not wokring, it will show <br /> <b>Notice</b>: Trying to get property 'id' of non-object in <b>C:\xampp\htdocs\mypost\api\delete.php</b> on line <b>22</b><br /> {"message":"Post Deleted"} even i put hardcode is still the same, the format looks like all right, can't figure out which one is wrong, is anyone can able to help?

//this is react page 

import { useEffect } from "react";
import axios from "axios";
import { useNavigate,useParams } from "react-router-dom";
export default function Delete(){
    const navigate=useNavigate();
    const {id}=useParams();   
    const harcode={"id":11};
    useEffect(()=>{
    deletePost();
    },[]);
//currently using hard code but still show same error
 const deletePost=()=>{ 
    axios.delete('http://localhost:8081/mypost/api/delete.php',{"id":11})
    .then(res=>{
     console.log(res.data)
     navigate('/read');
 }).catch(err=>console.log(err))}
    return(
        <h1>Delete my Post</h1>
    )
}

//this is php delete page 

<?php 
  // Headers
  header('Access-Control-Allow-Origin: *');
  header('Content-Type: application/json');
  header('Access-Control-Allow-Methods: DELETE');
  header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods, Authorization, X-Requested-With');

  include_once '../config/Database.php';
  include_once '../models/Post.php';

  // Instantiate DB & connect
  $database = new Database();
  $db = $database->connect();

  // Instantiate blog post object
  $post = new Post($db);

  // Get raw posted data
  $data = json_decode(file_get_contents("php://input"));

  // Set ID to update
  $post->id = $data->id;

  // Delete post
  if($post->delete()) {
    echo json_encode(
      array('message' => 'Post Deleted')
    );
  } else {
    echo json_encode(
      array('message' => 'Post Not Deleted')
    );
  }

//this is php post page

<?php 
  // Headers
  header('Access-Control-Allow-Origin: *');
  header('Content-Type: application/json');
  header('Access-Control-Allow-Methods: DELETE');
  header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods, Authorization, X-Requested-With');

  include_once '../config/Database.php';
  include_once '../models/Post.php';

  // Instantiate DB & connect
  $database = new Database();
  $db = $database->connect();

  // Instantiate blog post object
  $post = new Post($db);

  // Get raw posted data
  $data = json_decode(file_get_contents("php://input"));

  // Set ID to update
  $post->id = $data->id;

  // Delete post
  if($post->delete()) {
    echo json_encode(
      array('message' => 'Post Deleted')
    );
  } else {
    echo json_encode(
      array('message' => 'Post Not Deleted')
    );
  }

Answer 1

use this method

const deletePost=(id)=>{ 
        axios.delete(`http://localhost:8081/mypost/api/delete.php/${id}`)
        .then(res=>{
         console.log(res.data)
         navigate('/read');
     }).catch(err=>console.log(err))}
        return(
            <h1>Delete my Post</h1>
        )
    }