Furnção Transform do Yup não funciona

Prezados, tentei implementar a função transform de acordo com o exemplo da aula, recebo o feedback do telefone inserido no input, mas a função transforma, que chama o formatarTelefone, não funciona. Dexei o código identico ao do exemplo, só retirei o matches.

import CustomButton from "@/Components/Button";
import Section from "@/Components/Section";
import Wrapper from "@/Components/Templates/Wrapper";
import { Fieldset, Label } from "@headlessui/react";
import { Field, Form, Formik, useFormik, useFormikContext } from "formik";
import * as Yup from 'yup';
import clsx from "clsx";

const formatarTelefone = (valor) => {
    if (!valor) return

    const telefone = valor.replace(/\D/g, "")

    return `(${telefone.slice(0, 2)}) ${telefone.slice(2, 7)}-${telefone.slice(7)}`
}

const schema = Yup.object().shape({
    telefone: Yup.string().required('Campo obrigatório').transform(formatarTelefone),
});


const TesteYup = () => {
    return (
        <Wrapper title='Teste' path='/teste' breadcumbText='Teste'>
            <Section title="Cadastrar Teste">
                <Fieldset
                    className={`w-full shadow py-6 p-6 gap-4 bg-principal-container text-texto`}>
                    <Formik
                        initialValues={{
                            telefone: "",


                        }}
                        validationSchema={schema}
                        onSubmit={(values, e) => {

                            alert(JSON.stringify(values, null, 2));

                        }}>
                        <Form>
                            <div className="flex flex-row gap-6 pb-4 flex-wrap md:flex-nowrap">
                                <Fieldset className="flex flex-row flex-wrap grow items-center justify-start w-full pb-4">
                                    <Label className="w-full p-2">Telefone</Label>
                                    <Field
                                        name="telefone"
                                        id="telefone"
                                        type="input"
                                        placeholder="(99)99999-9999"
                                        className={clsx('bg-secondary-container rounded-lg py-1.5 pr-14 pl-3 text-left text-sm/6 text-texto border-none outline-none focus:outline focus:outline-0', 'bg-principal-100', 'shadow')} />
                                </Fieldset>
                            </div>
                            <div className="align-middle justify-center flex pt-6">
                                <CustomButton type="submit" >Cadastrar</CustomButton>
                            </div>

                        </Form>
                    </Formik>
                </Fieldset>
            </Section>
        </Wrapper>
    )
}

export default TesteYup;