Mascara cep com react-hook-form - resolvido

import React from "react";
import InputMask from "react-input-mask";
// import InputMask from "react-text-mask";
import { useForm, Controller } from "react-hook-form";

export default function App() {
  const [user, setUser] = React.useState({});
  const { register, handleSubmit, control } = useForm();

  function onSubmit(data) {
    console.log(data);
  }

  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          type="text"
          name="name"
          placeholder="User full name"
          ref={register}
          defaultValue={user.name}
        />
        <input
          type="email"
          name="email"
          placeholder="User email"
          ref={register}
          defaultValue={user.email}
        />
        <Controller
          as={InputMask}
          control={control}
          mask="99999-999"
          name="cep"
          defaultValue={user.cep}
        />
        <button type="submit">SEND</button>
      </form>
    </div>
  );
}

Type '{ as: typeof ReactInputMask; name: "cep"; mask: string; control: Control<{ cep: string; logradouro: string; numero: number; complemento: string; estado: string; bairro: string; cidade: string; }, any>; rules: { ...; }; render: ({ field: { value, onChange, onBlur } }: { ...; }) => Element; }' is not assignable to type 'IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps<{ cep: string; logradouro: string; numero: number; complemento: string; estado: string; bairro: string; cidade: string; }, "cep">; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => ReactElemen...'.
  Property 'as' does not exist on type 'IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps<{ cep: string; logradouro: string; numero: number; complemento: string; estado: string; bairro: string; cidade: string; }, "cep">; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => ReactElemen...'.ts(2322)

"@types/react-input-mask": "^3.0.5",
"react-input-mask": "^2.0.4",
"react": "18.2.0",
"react-redux": "8.0.5",

<Controller
                name={'cep'}
                control={control}
                rules={{required: true}}
                render={({field}) =>
                    <InputMask
                        {...field}
                        required
                        mask="99999-999"
                        placeholder={'CEP'}
                        defaultValue={user.cep}
                    />
                }
            />

<Controller
                  name='cpf'
                  control={control}
                  rules={{ required: true }}
                  render={({ field }) => <TextField {...field} required mask='[CPF removido]' placeholder={'CEP'} />}
                />

function FormattedInput(props: any) {
    const {inputRef, ...other} = props;

    return (
        <InputMask
            {...other}
            ref={inputRef}
            mask="[CPF removido]"
            placeholder="CPF"
            defaultValue={user.cep}
        />
    );
}

return (
  ....
 
            <Controller
                name={'cpf'}
                control={control}
                rules={{required: true}}
                render={({field}) =>
                    <TextField
                        required
                        {...field}
                        label={"CPF"}
                        InputProps={{
                            inputComponent: FormattedInput
                        }}
                    />
                }
            />
)