[od0201]

Мне нужен был Ref чтоб получать данные с кнопки, но я эту кнопку разместил внутри DataGrid, получилось эстетичнее чем планировал

<DataGrid
        rows={rows}
        columns={columns}
        components={{
          Toolbar: CustomToolbar,
        }}        
      />

const ExportIcon = createSvgIcon(<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />, 'SaveAlt',);
function CustomToolbar() {
  const apiRef=useGridApiContext()
  const buttonBaseProps = {
    color: 'primary',
    size: 'small',
    startIcon: <ExportIcon />,
  };
  return (
    <GridToolbarContainer>
      {/* <GridToolbarColumnsButton />      <GridToolbarDensitySelector />      <GridToolbarExport /> */}
      <GridToolbarFilterButton />
      <Button
        {...buttonBaseProps}        
        onClick={()=>saveAsExcel(apiRef.current.getVisibleRowModels())}
      >
        Export XLSX
      </Button>
    </GridToolbarContainer>
  );
}

Вариант с первого поста плох, там создается пустой заголовок, который в конечном итоге виден и отображается в фильтре.

Вопрос о выносе данных за пределы уже созданного элемента остается открытым. Я понимаю что это просто, но как, не могу найти материал...

может я непонятно объясняю. Например есть стандартный <Button /> как мне внутри передать данные наружу (или выполнить функцию)?