Inspectors.js

import React, { useMemo, useEffect } from 'react'
import IMTFPlugins from 'IMTFPlugins'

export default function MyTaskInspector({ item }) {
  const caseRefOid = item.getIn(['caseRef', 'oid'])
  const casePayload = IMTFPlugins.hooks.case.usePayload(caseRefOid)

  return (
    <div>
      KYC Officer name : {casePayload && casePayload.get('kycOfficerName')}
    </div>
  )
}

export function MyTaskInspectorAlternative({ item }) {
  const caseRefOid = item.getIn(['caseRef', 'oid'])

  const {
    requests: { case: getPayload },
    selector: {
      useSelector,
      case: { createPayloadSelector },
    },
  } = IMTFPlugins

  const selector = useMemo(() => createPayloadSelector(caseRefOid), [
    caseRefOid,
    createPayloadSelector,
  ])

  const casePayload = useSelector(selector)

  useEffect(() => {
    if (casePayload === undefined) {
      getPayload(caseRefOid)
    }
  }, [casePayload, caseRefOid, getPayload])

  return (
    <div>
      KYC Officer name : {casePayload && casePayload.get('kycOfficerName')}
    </div>
  )
}