Fixes management app breadcrumb error

Signed-off-by: Ashwin Pc <[email protected]>

src/plugins/index_pattern_management/public/components/index_pattern_table/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx

@@ -37,6 +37,7 @@ import { EuiPageContent, EuiSpacer, EuiText, EuiFlexItem, EuiFlexGroup } from '@
 import { EuiDescriptionListTitle } from '@elastic/eui';
 import { EuiDescriptionListDescription, EuiDescriptionList } from '@elastic/eui';
 import { EuiLink } from '@elastic/eui';
+import { useMount } from 'react-use';
 import { getListBreadcrumbs } from '../../breadcrumbs';
 import { IndexPatternCreationOption } from '../../types';
 import { CreateButton } from '../../create_button';
@@ -56,7 +57,9 @@ export const EmptyIndexPatternPrompt = ({
   docLinksIndexPatternIntro,
   setBreadcrumbs,
 }: Props) => {
-  setBreadcrumbs(getListBreadcrumbs());
+  useMount(() => {
+    setBreadcrumbs(getListBreadcrumbs());
+  });
 
   return (
     <EuiPageContent

src/plugins/index_pattern_management/public/components/index_pattern_table/index_pattern_table.tsx

@@ -44,6 +44,7 @@ import { FormattedMessage } from '@osd/i18n/react';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import React, { useState, useEffect } from 'react';
 import { i18n } from '@osd/i18n';
+import { useMount } from 'react-use';
 import {
   reactRouterNavigate,
   useOpenSearchDashboards,
@@ -111,7 +112,10 @@ export const IndexPatternTable = ({ canSave, history }: Props) => {
   const [isLoadingSources, setIsLoadingSources] = useState<boolean>(true);
   const [isLoadingIndexPatterns, setIsLoadingIndexPatterns] = useState<boolean>(true);
 
-  setBreadcrumbs(getListBreadcrumbs());
+  useMount(() => {
+    setBreadcrumbs(getListBreadcrumbs());
+  });
+
   useEffect(() => {
     (async function () {
       const options = await indexPatternManagementStart.creation.getIndexPatternCreationOptions(

src/plugins/management/public/components/landing/landing.tsx

@@ -39,14 +39,17 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import { useMount } from 'react-use';
 
 interface ManagementLandingPageProps {
   version: string;
   setBreadcrumbs: () => void;
 }
 
 export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLandingPageProps) => {
-  setBreadcrumbs();
+  useMount(() => {
+    setBreadcrumbs();
+  });
 
   return (
     <EuiPageContent horizontalPosition="center" data-test-subj="managementHome">