[Bug] xAxis.axisLabel.rich.<style_name>. align is an invalid configuration

[canvascat]

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?code=PYBwLglsB2AEC8sDeAoWsDGwA2wBOAXLANoBEAxAMyUCcAHACIBCpAugDRqxjA6QhFU6dGDwQA5uICmhWKQCGADwgBnUp2GwlqgArAI0MDMFdNYAJ4gpRUioAW8gCbAA7qVOwAvl08bY4sUdBXy5FAEFlFSJiIWELKxsMeSNxfHN1D0dk-WjSAFkYdTkAFQBXKSLSAHUpR0riu1LKgDExSoBlZI7S6DYfDi5zCNVo2JFLazkAN3lscvd0TwH0FRkIKSiSMdhoeQBbSdJAF7dAUuNAfujAO9SMswmbACN5PGvhB7wqiEcwOxsANgAGACkz3QWTAORIAEY_uxYABWABMMPhf2hsGoABYYbRUdRUfDkax-ihPEA&_source=echarts-doc-preview&version=5.5.1

Steps to Reproduce

set the first item to left-align, red color. but left align is invalid.

option = {
  color: ['#3398DB'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {},
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLabel: {
        formatter: (value, index) => {
          if (index === 0) return `{left|${value}}`;
          return value;
        },
        rich: {
          left: {
            align: 'left',
            color: 'red'
          }
        },
        align: 'right'
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '直接访问',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};

Current Behavior

left align is invalid.

Expected Behavior

the first item is right align

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response