adminJS shows raw IDs instead of actual data (using mikroORM and postreSQL)

Question

I am using TypeScript, mikroORM, postreSQL and adminJS. Trying to achieve the actual data being displayed instead of its raw IDs. I have two entities:

@Entity({ tableName: 'professors' })
export class Professor {
  @PrimaryKey({ type: 'serial' })
  id!: number

  @Property({ fieldName: 'full_name', type: 'varchar', length: 255 })
  fullName!: string

  @Property({ fieldName: 'h_index', type: 'int' })
  hIndex!: number

  @Property({ fieldName: 'i10_index', type: 'int' })
  i10Index!: number

  @Property({ fieldName: 'article_amount', type: 'int' })
  articleAmount!: number

  @Property({ fieldName: 'employed_rate', type: 'float' })
  employedRate!: number

  @OneToMany(() => Survey, survey => survey.professor)
  surveys = new Collection<Survey>(this)
}

and

@Entity({ tableName: 'survey' })
export class Survey {
  @PrimaryKey({ type: 'serial' })
  id!: number

  @ManyToOne(() => Professor)
  professor!: Professor

  @Property({ fieldName: 'survey_date', type: 'date' })
  surveyDate!: Date
}

My index.ts file with adminJS config:

AdminJS.registerAdapter({
  Resource: AdminJSMikroORM.Resource,
  Database: AdminJSMikroORM.Database,
})

const PORT = 3000

const start = async () => {
  const app = express()
  const orm = await MikroORM.init(config)
  const adminOptions = {
    resources: [
      {
        resource: { model: Professor, orm },
        options: {},
      },
      {
        resource: { model: Survey, orm },
        options: {
          properties: {
            professor: {
              reference: 'Professor',
              isVisible: {
                list: true,
                filter: true,
                show: true,
                edit: true,
              },
            },
            professor_id: {
              components: {
                list: Components.MyInputComponent,
              },
            },

            id: {
              isVisible: { list: false, filter: true, show: true, edit: false },
            },
            surveyDate: { type: 'date' },
          },
          listProperties: ['id', 'professor', 'surveyDate'],
          showProperties: ['id', 'professor', 'surveyDate'],
          editProperties: ['professor', 'surveyDate'],
          filterProperties: ['professor', 'surveyDate'],
        },
      },
    ],
    componentLoader,
  }

  const admin = new AdminJS(adminOptions)

  const adminRouter = AdminJSExpress.buildRouter(admin)
  app.use(admin.options.rootPath, adminRouter)

  app.listen(PORT, () => {
    console.log(
      `AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`
    )
  })
}

start()

I tried to use custom component (in code above) to change displayed data but it didnt help, it still shows data like that: . How to fix this? Can't find any information about this