diff --git a/src/plugins/vis_type_drilldown/public/components/card_form.tsx b/src/plugins/vis_type_drilldown/public/components/card_form.tsx
index 329f06325efe..8df23869db5a 100644
--- a/src/plugins/vis_type_drilldown/public/components/card_form.tsx
+++ b/src/plugins/vis_type_drilldown/public/components/card_form.tsx
@@ -21,8 +21,8 @@ interface CardFormProps {
   card: Card;
   updateCard: (index: number, card: Card) => void;
   options: any;
-  activeVisName: string;
-  handleVisTypeChange: () => void;
+  valueOfSelected: string;
+  onChange: () => void;
 }
 
 const CardForm = ({
@@ -35,7 +35,7 @@ const CardForm = ({
 }: CardFormProps) => {
   return (
     <EuiAccordion
-      id={index}
+      id={String(index)}
       buttonContent={`Drilldown ${index + 1}`}
       paddingSize="s"
       initialIsOpen={true}
diff --git a/src/plugins/vis_type_drilldown/public/drilldown_fn.ts b/src/plugins/vis_type_drilldown/public/drilldown_fn.ts
index 80d08c8bf22e..a79a29882b3f 100644
--- a/src/plugins/vis_type_drilldown/public/drilldown_fn.ts
+++ b/src/plugins/vis_type_drilldown/public/drilldown_fn.ts
@@ -28,7 +28,7 @@ export const createDrilldownVisFn = (): DrilldownVisExpressionFunctionDefinition
   }),
   args: {
     cards: {
-      types: [],
+      types: ['string'],
       help: i18n.translate('visTypeDrilldown.function.cards.help', {
         defaultMessage: 'Cards',
       }),
diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx
index 17fbd61616eb..9d53aea0d6bc 100644
--- a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx
+++ b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx
@@ -8,17 +8,18 @@ import { EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import { DrilldownVisParams, Card } from './types';
 
 interface DrilldownVisComponentProps extends DrilldownVisParams {
-  cards: Card[];
   renderComplete: () => void;
 }
 
 const DrilldownVisComponent = ({ cards, renderComplete }: DrilldownVisComponentProps) => {
   useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering.
 
+  const parsedCardData = JSON.parse(cards);
+
   return (
     <>
-      {cards &&
-        cards.map((card, index) => (
+      {parsedCardData &&
+        parsedCardData.map((card: Card, index: number) => (
           <EuiFlexItem key={index}>
             <EuiCard
               icon={<EuiIcon size="xl" type="dashboardApp" />}
diff --git a/src/plugins/vis_type_drilldown/public/to_ast.ts b/src/plugins/vis_type_drilldown/public/to_ast.ts
index c7230b1a68cd..b830336b56b0 100644
--- a/src/plugins/vis_type_drilldown/public/to_ast.ts
+++ b/src/plugins/vis_type_drilldown/public/to_ast.ts
@@ -13,7 +13,7 @@ export const toExpressionAst = (vis: Vis) => {
   const drilldownVis = buildExpressionFunction<DrilldownVisExpressionFunctionDefinition>(
     'drilldownVis',
     {
-      cards,
+      cards: JSON.stringify(cards),
     }
   );