getting raw data in view page when using DataTable in laravel

I am getting raw data in my view page when using DataTable in my laravel app. I have installed the package: composer require yajra/laravel-datatables-oracle

//PostController class
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use DataTables;
use Illuminate\Http\JsonResponse;
public function index()
    {
        try {
            $product = Post::query();
            return Datatables::of($product)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){

                           $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="View" class="me-1 btn btn-info btn-sm showProduct"><i class="fa-regular fa-eye"></i> View</a>';
                           $btn = $btn. '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editProduct"><i class="fa-regular fa-pen-to-square"></i> Edit</a>';

                           $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteProduct"><i class="fa-solid fa-trash"></i> Delete</a>';

                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);

        return view('temp',compact('product'));
        
        } catch (Exception $e) {
            return response()->json([
                'status'=>200,
                'message'=>$e->getMessage()
            ]);
        }
    }

In my view page, I have referenced all the packages required for datatable plugin

// view page 'temp.blade.php;
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
    </script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
     <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
    
     <div class="card-body">
            <table class="table table-bordered data-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Detail</th>
                        <th width="280px">Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        
        
        <script type="text/javascript">
    $(document).ready(function() {

        

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        url: 'posts',
        type: 'GET',

        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'detail', name: 'detail'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
    });
</script>

route file

Route::get('posts', [PostController::class, 'index']);
Route::post('posts', [PostController::class, 'store']);

Now in my view page 'temp.blade.php' its showing raw data only.

{
  "draw": 0,
  "recordsTotal": 4,
  "recordsFiltered": 4,
  "data": [
    {
      "id": 1,
      "name": "testte",
      "detail": "test-dsc",
      "status": "1",
      "created_at": null,
      "updated_at": null,
      "action": "\u003Ca href=\"javascript:void(0)\" data-toggle=\"tooltip\"  data-id=\"1\" data-original-title=\"View\" class=\"me-1 btn btn-info btn-sm showProduct\"\u003E\u003Ci class=\"fa-regular fa-eye\"\u003E\u003C/i\u003E View\u003C/a\u003E\u003Ca href=\"javascript:void(0)\" data-toggle=\"tooltip\"  data-id=\"1\" data-original-title=\"Edit\" class=\"edit btn btn-primary btn-sm editProduct\"\u003E\u003Ci class=\"fa-regular fa-pen-to-square\"\u003E\u003C/i\u003E Edit\u003C/a\u003E \u003Ca href=\"javascript:void(0)\" data-toggle=\"tooltip\"  data-id=\"1\" data-original-title=\"Delete\" class=\"btn btn-danger btn-sm deleteProduct\"\u003E\u003Ci class=\"fa-solid fa-trash\"\u003E\u003C/i\u003E Delete\u003C/a\u003E",
      "DT_RowIndex": 1
    },
    {
      "id": 2,
      "name": "test-2",
      "detail": "test-dsc-2",
      "status": "1",
      "created_at": null,
      "updated_at": null,
      "action": "\u003Ca href=\"javascript:void(0)\" data-toggle=\"tooltip\"  data-id=\"2\" data-original-title=\"View\" class=\"me-1 btn btn-info btn-sm showProduct\"\u003E\u003Ci class=\"fa-regular fa-eye\"\u003E\u003C/i\u003E View\u003C/a\u003E\u003Ca href=\"javascript:void(0)\" data-toggle=\"tooltip\"  data-id=\"2\" data-original-title=\"Edit\" class=\"edit btn btn-primary btn-sm editProduct\"\u003E\u003Ci class=\"fa-regular fa-pen-to-square\"\u003E\u003C/i\u003E Edit\u003C/a\u003E \u003Ca href=\"javascript:void(0)\" data-toggle=\"tooltip\"  data-id=\"2\" data-original-title=\"Delete\" class=\"btn btn-danger btn-sm deleteProduct\"\u003E\u003Ci class=\"fa-solid fa-trash\"\u003E\u003C/i\u003E Delete\u003C/a\u003E",
      "DT_RowIndex": 2
    }
}

Why is the raw data rendering in my page rather than the data table data?