diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
index 1fff9b1c28..488ded7a2b 100644
--- a/public/components/common/search/search.tsx
+++ b/public/components/common/search/search.tsx
@@ -310,7 +310,7 @@ export const Search = (props: any) => {
   };
 
   return (
-    <div className="globalQueryBar">
+    (<div className="globalQueryBar">
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="center" wrap>
@@ -411,7 +411,7 @@ export const Search = (props: any) => {
             )}
             <EuiFlexItem grow={false} />
             {!(queryRedux.selectedTimestamp === '' && queryResults?.datarows) && ( // index with no timestamp, dont show timepicker
-              <EuiFlexItem className="euiFlexItem--flexGrowZero event-date-picker" grow={false}>
+              (<EuiFlexItem className="euiFlexItem--flexGrowZero event-date-picker" grow={false}>
                 {!isLiveTailOn && (
                   <DatePicker
                     startTime={startTime}
@@ -437,7 +437,7 @@ export const Search = (props: any) => {
                     isAppAnalytics={isAppAnalytics}
                   />
                 )}
-              </EuiFlexItem>
+              </EuiFlexItem>)
             )}
             {!showQueryArea && (
               <EuiFlexItem grow={false}>
@@ -560,6 +560,6 @@ export const Search = (props: any) => {
         )}
       </EuiFlexGroup>
       {flyout}
-    </div>
+    </div>)
   );
 };
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index c481199fd4..7fdf487578 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -538,7 +538,7 @@ export const Explorer = ({
 
   const mainContent = useMemo(() => {
     return (
-      <div className="dscWrapper">
+      (<div className="dscWrapper">
         {explorerData && !isEmpty(explorerData.jsonData) ? (
           <EuiFlexGroup direction="column" gutterSize="none">
             {(isDefaultDataSourceType || appLogEvents) && query[SELECTED_TIMESTAMP] !== '' && (
@@ -667,7 +667,7 @@ export const Explorer = ({
         ) : (
           <NoResults tabId={tabId} />
         )}
-      </div>
+      </div>)
     );
   }, [
     isPanelTextFieldInvalid,
diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx
index e799333423..84ca74a6ce 100644
--- a/public/components/notebooks/components/notebook.tsx
+++ b/public/components/notebooks/components/notebook.tsx
@@ -918,7 +918,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
     ) : null;
 
     return (
-      <div style={pageStyles}>
+      (<div style={pageStyles}>
         <EuiPage>
           <EuiPageBody component="div">
             <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
@@ -1057,7 +1057,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
               </>
             ) : (
               // show default paragraph if no paragraphs in this notebook
-              <div style={panelStyles}>
+              (<div style={panelStyles}>
                 <EuiPanel>
                   <EuiSpacer size="xxl" />
                   <EuiText textAlign="center">
@@ -1105,13 +1105,13 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                   </EuiFlexGroup>
                   <EuiSpacer size="xxl" />
                 </EuiPanel>
-              </div>
+              </div>)
             )}
             {showLoadingModal}
           </EuiPageBody>
         </EuiPage>
         {this.state.isModalVisible && this.state.modalLayout}
-      </div>
+      </div>)
     );
   }
 }
diff --git a/public/components/notebooks/components/paragraph_components/para_input.tsx b/public/components/notebooks/components/paragraph_components/para_input.tsx
index 44a89ba5d1..6a408bae82 100644
--- a/public/components/notebooks/components/paragraph_components/para_input.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_input.tsx
@@ -69,7 +69,7 @@ export const ParaInput = (props: {
 
   const RenderParaInput = () => {
     return (
-      <div style={{ width: '100%' }}>
+      (<div style={{ width: '100%' }}>
         {/* If the para is selected show the editor else display the code in the paragraph */}
         {para.isSelected ? (
           <EuiTextArea
@@ -97,7 +97,7 @@ export const ParaInput = (props: {
             {para.inp}
           </EuiCodeBlock>
         )}
-      </div>
+      </div>)
     );
   };
 
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
index 4386221dcd..45ff087f74 100644
--- a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
@@ -165,7 +165,7 @@ export function DashboardTable(props: {
           const currPercentileFilter = filter ? filter.value : '';
           return item ? (
             // expand plot ranges to accommodate scale
-            <BoxPlt
+            (<BoxPlt
               plotParams={{
                 min:
                   varianceProps.ticks.length > 1
@@ -197,7 +197,7 @@ export function DashboardTable(props: {
                   props.addPercentileFilter(condition, additionalFilters);
                 },
               }}
-            />
+            />)
           ) : (
             '-'
           );
diff --git a/public/components/trace_analytics/components/dashboard/top_latency_table.tsx b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
index ff8293b65b..24c1dfa822 100644
--- a/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
+++ b/public/components/trace_analytics/components/dashboard/top_latency_table.tsx
@@ -175,7 +175,7 @@ export function LatencyTable(props: {
           const currPercentileFilter = filter ? filter.value : '';
           return item ? (
             // expand plot ranges to accommodate scale
-            <BoxPlt
+            (<BoxPlt
               plotParams={{
                 min:
                   varianceProps.ticks.length > 1
@@ -207,7 +207,7 @@ export function LatencyTable(props: {
                   props.addPercentileFilter(condition, additionalFilters);
                 },
               }}
-            />
+            />)
           ) : (
             '-'
           );
diff --git a/public/components/visualizations/charts/data_table/data_table.tsx b/public/components/visualizations/charts/data_table/data_table.tsx
index c340ff0d05..7986c883de 100644
--- a/public/components/visualizations/charts/data_table/data_table.tsx
+++ b/public/components/visualizations/charts/data_table/data_table.tsx
@@ -131,11 +131,11 @@ export const DataTable = ({ visualizations, layout, config }: any) => {
   const onPageSizeChanged = useCallback(
     (val: number) => {
       setPageSize(val);
-      gridRef.current.api.paginationSetPageSize(val);
+      gridRef.current.api.setGridOption("paginationPageSize", val);
       setActivePage(0);
       gridRef.current.api.paginationGoToPage(0);
       if (isFullScreen) {
-        gridRefFullScreen.current.api.paginationSetPageSize(val);
+        gridRefFullScreen.current.api.setGridOption("paginationPageSize", val);
         gridRefFullScreen.current.api.paginationGoToPage(0);
       }
     },