Merge Refs and call function from child in parent using useImperativeRef - React typescript

Question

I am forwarding a ref from parent to child. There is a method in a child which modifies this ref. I want to capture that value in the parent and I am using useImperativeValue to achieve this. However, when I merge using @react-hook/merged-ref, I do not get the ref value properly inside the child. Can you please tell me on whats going wrong. Thanks.

import React, {
  forwardRef,
  useMemo,
  useEffect,
  useRef,
  useImperativeHandle,
} from 'react';
import {
  AgGridReactProps,
  AgReactUiProps,
} from 'ag-grid-react/lib/shared/interfaces';
import { AgGridReact } from 'ag-grid-react';
import { map, isFunction } from 'lodash';
import { ColumnApi } from 'ag-grid-community/dist/lib/columns/columnApi';
import useMergedRef from '@react-hook/merged-ref';

interface HelloProps extends AgGridReactProps, AgReactUiProps {
  rowData?: any[] | null;
}

export interface AutoSizeRef {
  autoSizeAll: () => void;
}

const Hello = forwardRef<AgGridReact & AutoSizeRef, HelloProps>(
  (props, ref) => {
    const autoSizeRef = useRef<(AutoSizeRef & AgGridReact) | null>(null);

    const mergedRef = useMergedRef(ref, autoSizeRef);

    console.log('mergedRef', mergedRef);

    const autoSizeAll = (): void => {
      if (mergedRef != null && !isFunction(mergedRef)) {
        const allColumnIds = map(
          (mergedRef.current?.columnApi as ColumnApi).getAllColumns(),
          (column) => {
            return (column as any).getId();
          }
        );
        (mergedRef.current?.columnApi as ColumnApi).autoSizeColumns(
          allColumnIds,
          false
        );
      }
    };

    useEffect(() => {
      setTimeout(() => autoSizeAll(), 400);
    }, [mergedRef]);

    useImperativeHandle(mergedRef, () => ({
      autoSizeAll() {
        autoSizeAll();
      },
    }));

    const containerStyle = useMemo(
      () => ({ width: '100%', height: '100%' }),
      []
    );
    const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
    return (
      <div style={containerStyle}>
        <div className="ag-theme-alpine" style={gridStyle}>
          <AgGridReact
            animateRows
            ref={ref}
            domLayout="autoHeight"
            {...props}
          />
        </div>
      </div>
    );
  }
);

export default Hello;

This is my stackblitz link

I am expecting agGridRef and autoSize to be merged together and access inside gridRef.current in the parent.