adição da mascara do CPF

src/components/patients/PatientForm.jsx

@@ -2,6 +2,23 @@ import React, { useState } from 'react';
 import InputMask from "react-input-mask";
 
 function PatientForm({ onSave, onCancel }) {
+
+
+  const FormatTelefones = () => {}
+
+
+  const FormatCPF = (valor) => {
+  
+  const digits = String(valor).replace(/\D/g, '').slice(0, 11);
+
+  
+  return digits
+    .replace(/(\d{3})(\d)/, '$1.$2')   // 123 -> 123.
+    .replace(/(\d{3})(\d)/, '$1.$2')   // 123.456 -> 123.456.
+    .replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
+  }
+
+
   const [formData, setFormData] = useState({
     nome: '',
     nomeSocial: '',
@@ -39,8 +56,22 @@ function PatientForm({ onSave, onCancel }) {
       ...formData,
       [name]: value
     });
+
+    console.log(name)
+
+    if(e.target.name.include('cpf')){
+
+      let x = FormatCPF(e.target.value)
+
+      console.log(x)
+      setFormData({...formData,
+      [name]: x,}
+      )
+
+    }
   };
 
+ 
   // Função para buscar endereço pelo CEP
   const handleCepBlur = async () => {
     const cep = formData.cep.replace(/\D/g, '');
@@ -66,8 +97,8 @@ function PatientForm({ onSave, onCancel }) {
   };
 
   const handleSubmit = () => {
-    if (!formData.nome || !formData.cpf) {
+    if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento){
-      alert('Por favor, preencha Nome e CPF.');
+      alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
       return;
     }
     onSave(
@@ -149,7 +180,7 @@ function PatientForm({ onSave, onCancel }) {
         </div>
         <div className="col-md-6 mb-3">
           <label>CPF:</label>
-          <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={handleChange} />
+          <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
         </div>
         <div className="col-md-6 mb-3">
           <label>Profissão:</label>