import React, { useState } from 'react';
import { DashboardsSelector } from '@kbn/dashboards-selector';
import type { ContentManagementPublicStart } from '@kbn/content-management-plugin/public';

interface Props {
  contentManagement: ContentManagementPublicStart;
}

export const MyComponent = ({ contentManagement }: Props) => {
  // Persist only the dashboard ids in your form state
  const [dashboardsFormData, setDashboardsFormData] = useState<Array<{ id: string }>>([]);

  return (
    <DashboardsSelector
      contentManagement={contentManagement}
      dashboardsFormData={dashboardsFormData}
      onChange={(opts) => {
        // opts => Array<EuiComboBoxOptionOption<string>>
        setDashboardsFormData(opts.map(({ value }) => ({ id: value })));
      }}
      placeholder="Select one or more dashboards"
    />
  );
};