What needs to be done on the Input form field to mask the format to the database?

Question

Formatted the form_input_field, but the number displays and stores in the db differently. Please let me know if you need further details.

<div class="my-5" data-controller="phoneinput">
    <%= form.label :Phone %>
    <%= form.text_field :phone, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full", data: { 'phoneinput-target': 'input'}, :maxlength=>"12", placeholder: "555-111-5555" %>
  </div>

to perform 555555 to 555-111-5555 using a stimulus controller

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "input" ]
  connect() {
    const input = this.inputTarget;
    // console.log("hellow");
  input.addEventListener("keydown", (e) => {
  if (e.key === "Backspace" || e.key === "Delete") return
  if (e.target.value.length === 3) {
    input.value = input.value + "-"
  }
  if (e.target.value.length === 7) {
    input.value = input.value + "-"
  }
  if(e.target.value.length === 14) {
      input.value = input.value + "-";
  }
}

)
  }
}