Unable to add custom style with PassThrough of DatePicker in PrimeVue

I've passed the custom style in pt as official documents suggested, but the style remains as default.

<DatePicker
      v-model="date"
      dateFormat="yy/mm/dd"
      size="small"
      panelClass="custom"
      :pt="{
        pcInputText: {
          style: {
            'text-align': 'center',
            'font-size': 'xx-large',
            'background-color': 'rgba(0, 0, 0, 0.2)',
          },
        }, ...
}" />

DatePicker pt options reference: https://primevue.org/datepicker/

I've looked up in the DatePicker pt options, but I found no luck at all without knowing why. The style should be changed as the following image shows:

• Default style:
• Desired style:

It is possible to give an input class or style directly without using the pt expression. You can use it using Tailwind as follows. You can find it in this DatePicker API props tab inputClass of the document. Below is the code and screen output image.

<template>
    <div class="card flex justify-center">
        <DatePicker 
            dateFormat="yy/mm/dd"
            size="small" 
            v-model="date" 
            inputClass="!text-center !text-2xl !bg-gray-200"
        />
    </div>
</template>

<script setup>
import { ref } from "vue";

const date = ref();
</script>