How can i use the MUI data grid Premium toolbar outside the grid?

Question

This is the use of MUI grid I want to use the GRID TOOL BAR with my custom grid action toolbar can i achieve it or not?

Table.tsx:

import { DataGridPremium, GridToolbar } from '@mui/x-data-grid-premium';

return (
        <>
  <DataGridPremiumTable
                columns={columnsData}
                rows={rowsData}
                slots={{
                    toolbar: GridToolbar,
                }}
            ></DataGridPremiumTable>
</>
)

collapsableComponent.tsx:

const listView = (
        <div ref={gridActionRef} className={gridActions && gridActions.length === 0 ? 'no-grid-actions' : ''}>
            {/* grid-action start */}
            {gridActions && (
                <div
                    className="grid-action"
                    style={
                        (selectedRow && detailComponent) || openDetailPageId?.openDetailPage || gridActions.length > 0
                            ? {}
                            : { padding: '0px', borderBottom: '0px' }
                    }
                >
                    {/* tabs start */}

                    <Tabs
                        value={value}
                        onChange={handleChange}
                        variant="scrollable"
                        scrollButtons
                        allowScrollButtonsMobile
                        aria-label="action-menus"
                        sx={{
                            minHeight: 'auto',
                        }}
                    >
                        {gridActions &&
                            gridActions.map((item: GridActionsItem) => {
                                if (selectedRow) {
                                    if (item.isHideInDetailView === false) {
                                        return item.content;
                                    }
                                } else {
                                    if (openDetailPageId?.openDetailPage) {
                                        if (item.isHideInDetailView === false) {
                                            return item.content;
                                        }
                                    } else {
                                        return item.content;
                                    }
                                }
                            })}
                        {/* if random id added from url then page will show no results found and at tht time to render view summary btn this condition is mandatory */}
                        {(selectedRow && detailComponent) || openDetailPageId?.openDetailPage ? (
                            <Tab
                                key="view-summary"
                                title="View Summary"
                                label="View Summary"
                                id="View_Summary"
                                className="action-menu"
                                component={Button}
                                startIcon={<SummaryIcon />}
                                onClick={handleSummaryClick}
                                tabIndex={0}
                                value={value}
                            />
                        ) : (
                            ''
                        )}
                    </Tabs>

                    {/* tabs end */}
                </div>
            )}

            {/* grid-action end */}
            <div className="grid-action-space" style={{ width: '0px', height: '0px' }}></div>
            
            {/* table-wrapper start */}
            <div
                className={`table-wrapper collapsible-table-box${inLineFilter ? ' inLine-Filter-Grid' : ''}`}
                style={{ minHeight: `${rows?.length * 44 + 44}px` }}
            >
                {muiTable}
            </div>
            {/* table-wrapper end */}
        </div>
    );

the use of this common i have done like this :

<CollapsableComponent
                rows={rows}
                columns={columns}
                gridActions={gridActions}
                {...DataGridConfig}
            />

const gridActions: GridActionsItem[] = [
        {
            isHideInDetailView: false,
            content: (
                <Tab
                    tabIndex={0}
                    key="filter-btn"
                    onClick={(event: any) => {
                        openFilterDrawer(event);
                    }}
                    component={Button}
                    startIcon={<FilterIcon />}
                    title={'filter'}
                    label={'filter'}
                />
            ),
        },{ "i want to add new button here which will call the same functionality as the mui grid tool bar"}]

i want use the grid tool bar in grid action can i achieve it or not?

i have tried to style mui toolbar but the grid action It does not properly fit with the ui