Data is not getting inserted into database in Laravel and Angular

I am trying to insert data in my database table named "profile_skills" but it is not getting inserted and I am getting success message from query Plus there is no error in the console and network. MySQL Database

Here is from front end code in Angular 14

HTML file

<header>
  <section class="py-1 my-2">
    <h3 class="px-4" style="font-weight: 5  00; color: #014aac;">Skils</h3>
  </section>
</header>
<section class="pt-3 pb-0 mx-4" style="border-top: 1px solid rgb(231, 235, 251)">
  <div class="py-2">
    <div class="d-flex">      
    </div>
    <div class="px-1">
      <div class="d-flex pt-1">
        <h6 class="fs-4 px-2" style="font-weight: 500;">Your skills</h6>
        <!-- <h6 class="my-2 pb-0">20% service fee excl. GST</h6> -->
      </div>

      <div class="card px-2 mt-3">
        <div class="card-body">
          <div class="skillSet" *ngIf="perAddedSkills">
            <span class="badge bg-secondary mt-2" *ngFor="let item of perAddedSkills" >{{ item.title }}</span>
          </div>
        </div>
      </div>

      <div class="d-flex pt-1">
        <h6 class="fs-4 px-2" style="font-weight: 500;">Select Your skills</h6>
        <!-- <h6 class="my-2 pb-0">20% service fee excl. GST</h6> -->
      </div>
      
      <div class="card px-2">
        <div class="card-body">
          <label for="">Select Skills</label>
          <div class="skillSet">
            <span class="badge bg-secondary mt-2" *ngFor="let item of states" (click)="selectSkills(item.id, item.title)" >{{ item.title }}</span>
          </div>
          <label class="mt-3">Add Skills</label>
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Enter Your Skill" [(ngModel)]="newSkill">
            <span class="input-group-text" id="basic-addon2" (click)="addNewSkill()">Add</span>
          </div>
          <button class="btn firstlist mt-2" (click)="updateSkill()">Update</button>
        </div>
      </div>
      
    </div>
  </div>
</section>

.ts file

import { Component, OnInit } from '@angular/core';
import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';
import { ToastrService } from 'ngx-toastr';
import { DataService } from '../data.service';

@Component({
  selector: 'app-Skills',
  templateUrl: './Skills.component.html',
  styleUrls: ['./Skills.component.scss']
})
export class SkillsComponent implements OnInit {

  newSelectedSkill : any = [];
  perAddedSkills : any = [];

  newSkill = '';

  states: any;

  constructor(private ds : DataService,
    private ts : ToastrService) { 
      this.ds.getSkillList().subscribe((resp: any) => {
        if (resp.success) {
          this.states = resp.data
        }
      })
      this.ds.getMySkill().subscribe((resp:any) => {
        if (resp.success) {
          for (const item of resp.data) {
            let obj = {
              id : item.skill.id,
              title : item.skill.title
            }
            console.log(obj);
            
            this.perAddedSkills.push(obj);
          }
        }
      })
    }

  ngOnInit() {
  }

  selectSkills(_id : number, _title : string ) : void {
    const obj = {
      id : _id,
      title : _title,
    };
    let newObj = this.perAddedSkills.filter((x : any) => x.id == _id);

    if (newObj.length > 0) {
      let removeItem = [];
      for (const i of this.perAddedSkills) {
        if (i.id != _id) {
          removeItem.push(i)
        }
      }
      this.perAddedSkills = removeItem;
      return;
    }   

    this.perAddedSkills.push(obj);

  }

  addNewSkill() : void {

    if (this.newSkill == '') {
      this.ts.warning('Please enter same skill to add in the list');
      return;
    }

    const obj = {
      title : this.newSkill
    }

    this.ds.addSkill(obj).subscribe((resp: any) => {
      if (resp.success) {
        let newObj = this.perAddedSkills.filter((x : any) => x.id == resp.data.id);
        if (newObj.length == 0) {
          this.states.push(resp.data);
          let obj = {
            id : resp.data.id,
            title : resp.data.title
          };
          this.perAddedSkills.push(obj);
        }
        this.newSkill = '';
      }
    })
  }

  updateSkill() : void {
    if (this.perAddedSkills.length < 1) {
      this.ts.warning('Please add skill to update');
      return;
    }

    let obj = {
      skillList : this.perAddedSkills
    }

    this.ds.updateSkill(obj).subscribe((resp:any) => {
      if (resp.success) {
        this.ts.success('The skills have been updated to your profile')
      } else {
        this.ts.error(resp.errors.general)
      }
    })

  }
 
}

Finally Laravel Code

public function addSkill()

    {

        $inputs = $this->request->all();

        $v = Validator::make($inputs, [

            'title' => 'required',

        ]);



        if($v->fails()){

            return R::ValidationError($v->errors());

        }



        $data = [

            'title' => $inputs['title']

        ];



       //DB::beginTransaction();

       try {



            $check = Skill::where('title', $data['title'])->first();



            if ($check != null) {

                $data = $check;

            } else {

                $data = Skill::create($data);

            }            
            //DB::commit();
            return R::Success('New Skill added', $data);
       } catch (Exception $e) {
         DB::rollback();
         return R::SimpleError("Can't save data");  
       }
    }

Skill Model Code

<?php

namespace App\Models;



use Illuminate\Database\Eloquent\Model;



class Skill extends Model

{

    protected $guarded = [];

}

Database Screenshot:

Console Screenshot