键入时在react-hook-forms中添加空格

import React from 'react';
import { useForm } from 'react-hook-form';

function PhoneInput() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  const formatPhoneNumber = (event) => {
    let value = event.target.value.replace(/\D/g, ''); // Remove all non-digit characters
    value = value.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3'); // Add spaces
    event.target.value = value;
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        {...register('phoneNumber')}
        onChange={formatPhoneNumber}
        placeholder="Enter phone number"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default PhoneInput;

const onSubmit = data => {
  const cleanedData = { ...data };
  for (const key in cleanedData) {
    cleanedData[key] = cleanedData[key].replace(/\s+/g, '');
  }
  console.log(cleanedData);
};