How to use custom serde with provectus kafka-ui

Question

I am doing poc with provectus kafka-ui, an open source GUI tool for kafka.

For normal string value, my setup is running fine. However I am not able to use it with CloudEvent. I see encoded garbled characters.

I tried adding proto file for CloudEvent and using protobufFile as serde, but it is not working.

Here is my docker-compose

  kafka:
    image: confluentinc/cp-kafka:6.0.2
    container_name: kafka
    restart: always
    depends_on:
      - zookeeper
    ports:
      - "9092:9092"
      - "29092:29092"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      KAFKA_BROKER_ID: 1
      KAFKA_ZOOKEEPER_CONNECT: zookeeper:2181
      KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: PLAINTEXT:PLAINTEXT,PLAINTEXT_HOST:PLAINTEXT
      KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://kafka:29092,PLAINTEXT_HOST://localhost:9092
      KAFKA_INTER_BROKER_LISTENER_NAME: PLAINTEXT
      KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1

  kafka-ui:
    container_name: kafka-ui
    image: provectuslabs/kafka-ui:latest
    ports:
      - "8080:8080"
    depends_on:
      - zookeeper
      - kafka
    environment:
      KAFKA_CLUSTERS_0_NAME: local
      KAFKA_CLUSTERS_0_BOOTSTRAPSERVERS: kafka:29092
      KAFKA_CLUSTERS_0_ZOOKEEPER: zookeeper:2181
      KAFKA_CLUSTERS_0_JMXPORT: 9997
      kafka.clusters.0.serde.0.name: ProtobufFile
      kafka.clusters.0.serde.0.className: com.provectus.kafka.ui.serdes.builtin.ProtobufRawSerde
      kafka.clusters.0.serde.0.properties.protobufFilesDir: /protofiles/
      kafka.clusters.0.serde.0.properties.protobufMessageName: io.cloudevents.v1.CloudEvent # default type for values
      kafka.clusters.0.serde.0.properties.protobufMessageNameByTopic.ais-fused: io.cloudevents.v1.CloudEvent
    volumes:
      - "./proto/:/protofiles"