default Column defined outside the Table Component, breaks the code

Question

If defined outside default Column is not being called (Cell & Filter functions are undefined) & I get this error Error: Renderer Error ☝️ , Code for reference,

export const defaultColumn = {
    // Set our editable cell renderer as the default Cell renderer
    Cell: EditableCell,
    // Let's set up our default Filter UI
    Filter: FilterRow,
};


const CustomTable: FC<CustomTableProps> = (props) => {
    const {
        columns,
        data,
        setData,
        updateMyData,
        skipPageReset,
        updateGuest,
        deleteGuest,
        selectedProjectId,
    } = props;

    const {
        getTableProps,
        headerGroups,
        prepareRow,
        page,
        gotoPage,
        setPageSize,
        preGlobalFilteredRows,
        setGlobalFilter,
        state: { pageIndex, pageSize, selectedRowIds, globalFilter },
    } = useTable(
        {
            columns,
            data,
            defaultColumn,
            autoResetPage: !skipPageReset,
            // updateMyData isn't part of the API, but
            // anything we put into these options will
            // automatically be available on the instance.
            // That way we can call this function from our
            // cell renderer!
            selectedProjectId,
            updateMyData,
            updateGuest,
        },
        useGlobalFilter,
        useFilters,
        useSortBy,
        usePagination,
        useRowSelect,

But if I put this defaultColumn object inside the CustomTable then the code is working is fine, as shown below,

const CustomTable: FC<CustomTableProps> = (props) => {
    const defaultColumn = {
        // Set our editable cell renderer as the default Cell renderer
        Cell: EditableCell,
        // Let's set up our default Filter UI
        Filter: FilterRow,
    };

    const {
        columns,
        data,
        setData,
        updateMyData,
        skipPageReset,
        updateGuest,
        deleteGuest,
        selectedProjectId,
    } = props;

    const {
        getTableProps,
        headerGroups,
        prepareRow,
        page,
        gotoPage,
        setPageSize,
        preGlobalFilteredRows,
        setGlobalFilter,
        state: { pageIndex, pageSize, selectedRowIds, globalFilter },
    } = useTable(
        {
            columns,
            data,
            defaultColumn,
            autoResetPage: !skipPageReset,
            // updateMyData isn't part of the API, but
            // anything we put into these options will
            // automatically be available on the instance.
            // That way we can call this function from our
            // cell renderer!
            selectedProjectId,
            updateMyData,
            updateGuest,
        },
        useGlobalFilter,
        useFilters,
        useSortBy,
        usePagination,

So why the approach one is not working ?