How to use the @blueprintjs/icons.IconNames.TIME function in @blueprintjs/icons

const makeGradingStatus = (gradingStatus: string) => {
  let iconName: IconName;
  let intent: Intent;
  let tooltip: string;

  switch (gradingStatus) {
    case GradingStatuses.graded:
      iconName = IconNames.TICK;
      intent = Intent.SUCCESS;
      tooltip = 'Fully graded';
      break;

    case GradingStatuses.grading:
      iconName = IconNames.TIME;
      intent = Intent.WARNING;
      tooltip = 'Grading in progress';
      break;

    case GradingStatuses.none:
      iconName = IconNames.CROSS;
      intent = Intent.DANGER;
      tooltip = 'Not graded yet';
      break;

    default:
      // Shows default icon if this assessment is ungraded
      iconName = IconNames.DISABLE;
      intent = Intent.PRIMARY;
      tooltip = `Not applicable`;
      break;

function handleColumnClick(
  columnSchema: string,
  columnTable: string,
  nodeData: ITreeNode,
  onQueryStringChange: (queryString: string, run: boolean) => void,
): void {
  if (columnSchema === 'druid') {
    if (nodeData.icon === IconNames.TIME) {
      onQueryStringChange(
        `SELECT
  TIME_FLOOR(${escapeSqlIdentifier(String(nodeData.label))}, 'PT1H') AS "Time",
  COUNT(*) AS "Count"
FROM ${escapeSqlIdentifier(columnTable)}
WHERE "__time" >= CURRENT_TIMESTAMP - INTERVAL '1' DAY
GROUP BY 1
ORDER BY "Time" ASC`,
        true,
      );
    } else {
      onQueryStringChange(
        `SELECT
  "${nodeData.label}",
  COUNT(*) AS "Count"
FROM ${escapeSqlIdentifier(columnTable)}

<div>PICTURE</div>
        <div>
          <div>
            <h4>{overview.title}</h4>
          </div>
          <div>
            <h6>Mission 0 : 123123 XP (hardcoded)</h6>
          </div>
          <div>
            <p>{overview.shortSummary}</p>
          </div>
          <div>
            <div>
              
            </div>
            <div>
              
                <button>
                  Skip Story &amp; Attempt</button></div></div></div>

<div>
            <h6>
              {' '}
              {beforeNow(overview.openAt)
                ? `XP: ${overview.xp} / ${overview.maxXp}`
                : `Max XP: ${overview.maxXp}`}{' '}
            </h6>
          </div>
          <div>
            
          </div>
          <div>
            
            {renderAttemptButton ? this.makeOverviewCardButton(overview) : null}
          </div>
        
      
    
  );

public render() {
        return (
            
                <button>
            
        );
    }
</button>

<div>
            <h6> {`Max Grade: ${overview.maxGrade}`} </h6>
          </div>
          <div>
            <h6> {`Max XP: ${overview.maxXp}`} </h6>
          </div>
          <div>
            {this.state.editingOverviewField === 'shortSummary' ? (
              this.makeEditingOverviewTextarea('shortSummary')
            ) : (
              
            )}
          </div>
          <div>
            
            {this.makeOptionsButton()}
            {makeOverviewCardButton(overview, this.props.listingPath)}</div>

public render() {
    const gradingStatus = this.props.data.gradingStatus;
    let iconName: IconName;
    let tooltip: string;
    let intent: Intent;

    switch (gradingStatus) {
      case GradingStatuses.graded:
        iconName = IconNames.TICK;
        tooltip = `Fully graded: ${this.props.data.gradedCount} of 
          ${this.props.data.questionCount}`;
        intent = Intent.SUCCESS;
        break;
      case GradingStatuses.grading:
        iconName = IconNames.TIME;
        tooltip = `Partially graded: ${this.props.data.gradedCount} of 
          ${this.props.data.questionCount}`;
        intent = Intent.WARNING;
        break;
      case GradingStatuses.none:
        iconName = IconNames.CROSS;
        tooltip = `Not graded: ${this.props.data.gradedCount} of 
          ${this.props.data.questionCount}`;
        intent = Intent.DANGER;
        break;
      default:
        iconName = IconNames.DISABLE;
        tooltip = 'Not applicable';
        intent = Intent.PRIMARY;
    }