How to create move page Button?

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'id',
        headerName: '번호',
        type: 'number',
        minWidth: 70,
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'brand_name',
        headerName: '브랜드',
        type: 'string',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <>
              <Button
                variant="contained"
                color="primary"
                onClick={() => {
                  router.push(`/products?mall_id=${row.brand_name}`);
                }}
              >
                상품 목록
              </Button>
            </>
          );
        },
      },
    ],
    [],
  );

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'id',
        headerName: '번호',
        type: 'number',
        minWidth: 70,
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'brand_name',
        headerName: '브랜드',
        type: 'string',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <>
              <Button
                variant="contained"
                color="primary"
                onClick={() => {
                  router.push(`/products?mall_id=${row.brand_name}`);
                }}
              >
                상품 목록
              </Button>
            </>
          );
        },
      },
    ],
    [],
  );