how to scroll specific column to second column using react useRef?

I have a table and first column position is sticky. The first row is the date of the month. and the first column is student information. I want a button onClick action is scroll the specific column(today column) to the position next to the first column. How can I do that? Any suggestion is appreciated.

After I assign ref to the today's column, The scrollIntoView() function work. The column I want to show will under the sticky column. So I want to use scrollTo() function to provide accurate position. The issue is that scrollTo() doesn't work. Which element should I assign useRef. table, tableRow or tableData(tableHead)?

type ListProps = {
  AppStore: AppStore;
  TaskScheduleStore: TaskScheduleStore;
  EmployeeShiftStore: EmployeeShiftStore;
  BusRouteStore: BusRouteStore;
};

const List: React.FC<ListProps> = ({
  AppStore,
  TaskScheduleStore,
  EmployeeShiftStore,
  BusRouteStore,
}) => {
 

  const myRef = useRef<HTMLTableElement>(null);


  return (
    <Container>
      <Card>
          <div className='flex flex-row justify-between items-center'>
            <div className='flex flex-row items-center'>
              {format(currentDate, 'yyyy年M月')}
              <button
               
                onClick={() => {
                  // here is the button I want to scroll the column to specific position.
                  var table = document.getElementById(
                    'employeeShiftTable'
                  ) as HTMLTableElement;
                  console.log(table?.scrollWidth)
                  // here can print the table width.

                  if (myRef.current !== null) {
                    myRef.current.scrollBy({
                      top: 100,
                      left: 400,
                      behavior: 'smooth',
                    });
                  }
                }}
              >
                <span>Today</span>
              </button>
            </div>
          </div>
          <div>
            <table id='employeeShiftTable' ref={myRef}>
              <thead>
                <tr>
                  <th>
                    corner
                  </th>
                  {Array(getDaysInMonth(currentDate))
                    .fill(currentDate)
                    .map((date, index) => {
                      return (
                        <th>
                          <div>
                            {index + 1}
                          </div>
                        </th>
                      );
                    })}
                </tr>
              </thead>
              <tbody>
                {employeeShifts.map((data, rowIndex) => (
                  <tr>
                    <th className='headcol'>
                      <div>
                        {rowIndex}
                      </div>
                      <div className='flex flex-row align-items-center jobTitle'>
                        00012 Name
                      </div>
                    </th>
                    {Array(getDaysInMonth(currentDate))
                      .fill(1)
                      .map((daea, columnIndex) => (
                          <td>
                            <div style={{ padding: '12px' }}>
                              test
                            </div>
                          </td>
                      ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
      </Card>
    </Container>
  );
};

export default inject(
  ({ AppStore, TaskScheduleStore, EmployeeShiftStore, BusRouteStore }) => ({
    AppStore,
    TaskScheduleStore,
    EmployeeShiftStore,
    BusRouteStore,
  })
)(observer(List));