How to use the @ui5/webcomponents-react/lib/TextAlign.TextAlign.End function in @ui5/webcomponents-react

import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
import { Title } from '@ui5/webcomponents-react/lib/Title';
import React from 'react';
import notes from '../AnalyticalTable.md';
import generateData from './generateData';

const columns = [
  {
    Header: 'Name',
    accessor: 'name' // String-based value accessors!
  },
  {
    Header: 'Age',
    accessor: 'age',
    hAlign: TextAlign.End,
    disableGrouping: true,
    className: 'superCustomClass'
  },
  {
    Header: 'Friend Name',
    accessor: 'friend.name'
  },
  {
    Header: () =&gt; <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age',
    hAlign: TextAlign.End,
    filter: (rows, accessor, filterValue) =&gt; {
      if (filterValue === 'all') {
        return rows;
      }
      if (filterValue === 'true') {

},
  {
    Header: 'Age',
    accessor: 'age',
    hAlign: TextAlign.End,
    disableGrouping: true,
    className: 'superCustomClass'
  },
  {
    Header: 'Friend Name',
    accessor: 'friend.name'
  },
  {
    Header: () =&gt; <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age',
    hAlign: TextAlign.End,
    filter: (rows, accessor, filterValue) =&gt; {
      if (filterValue === 'all') {
        return rows;
      }
      if (filterValue === 'true') {
        return rows.filter((row) =&gt; row.values[accessor] &gt;= 21);
      }
      return rows.filter((row) =&gt; row.values[accessor] &lt; 21);
    },
    Filter: ({ column }) =&gt; {
      return (
        <select> column.setFilter(event.target.value)}
          style={{ width: '100%' }}
          value={column.filterValue ? column.filterValue : 'all'}
        &gt;</select>

hooks.getCellProps.push((cellProps, { cell: { column }, instance }) => {
    const { classes, rowHeight } = instance.webComponentsReactProperties;
    const style: CSSProperties = {};

    if (rowHeight) {
      style.height = `${rowHeight}px`;
    }

    switch (column.hAlign) {
      case TextAlign.Begin:
        style.textAlign = 'start';
        break;
      case TextAlign.Center:
        style.textAlign = 'center';
        break;
      case TextAlign.End:
        style.textAlign = 'end';
        break;
      case TextAlign.Left:
        style.textAlign = 'left';
        break;
      case TextAlign.Right:
        style.textAlign = 'right';
        break;
    }
    switch (column.vAlign) {
      case VerticalAlign.Bottom:
        style.verticalAlign = 'bottom';
        break;
      case VerticalAlign.Middle:
        style.verticalAlign = 'middle';
        break;

export const useCellStyling = ({ rowHeight }, classes) => ({ column }) => {
  const style: CSSProperties = {};

  if (rowHeight) {
    style.height = `${rowHeight}px`;
  }
  switch (column.hAlign) {
    case TextAlign.Begin:
      style.justifyContent = 'flex-start';
      break;
    case TextAlign.Center:
      style.justifyContent = 'center';
      break;
    case TextAlign.End:
      style.justifyContent = 'flex-end';
      break;
    case TextAlign.Left:
      style.justifyContent = 'left';
      break;
    case TextAlign.Right:
      style.justifyContent = 'right';
      break;
  }
  switch (column.vAlign) {
    case VerticalAlign.Bottom:
      style.alignItems = 'flex-end';
      break;
    case VerticalAlign.Middle:
      style.alignItems = 'center';
      break;