diff --git a/src/chart/generateCategoricalChart.tsx b/src/chart/generateCategoricalChart.tsx
index 77804a9cd2..225a49c3a9 100644
--- a/src/chart/generateCategoricalChart.tsx
+++ b/src/chart/generateCategoricalChart.tsx
@@ -1091,8 +1091,6 @@ export const generateCategoricalChart = ({
   return class CategoricalChartWrapper extends Component<CategoricalChartProps, CategoricalChartState> {
     static displayName = chartName;
 
-    uniqueChartId: string;
-
     clipPathId: string;
 
     cancelDefer: CancelFunction | null;
@@ -1116,8 +1114,7 @@ export const generateCategoricalChart = ({
     constructor(props: CategoricalChartProps) {
       super(props);
 
-      this.uniqueChartId = _.isNil(props.id) ? uniqueId('recharts') : props.id;
-      this.clipPathId = `${this.uniqueChartId}-clip`;
+      this.clipPathId = `${props.id ?? uniqueId('recharts')}-clip`;
 
       if (props.throttleDelay) {
         this.triggeredAfterMouseMove = _.throttle(this.triggeredAfterMouseMove, props.throttleDelay);
@@ -1423,21 +1420,12 @@ export const generateCategoricalChart = ({
       };
     }
 
-    /* eslint-disable  no-underscore-dangle */
     addListener() {
       eventCenter.on(SYNC_EVENT, this.handleReceiveSyncEvent);
-
-      if (eventCenter.setMaxListeners && eventCenter._maxListeners) {
-        eventCenter.setMaxListeners(eventCenter._maxListeners + 1);
-      }
     }
 
     removeListener() {
       eventCenter.removeListener(SYNC_EVENT, this.handleReceiveSyncEvent);
-
-      if (eventCenter.setMaxListeners && eventCenter._maxListeners) {
-        eventCenter.setMaxListeners(eventCenter._maxListeners - 1);
-      }
     }
 
     clearDefer = () => {
@@ -1466,10 +1454,8 @@ export const generateCategoricalChart = ({
       }
     };
 
-    handleReceiveSyncEvent = (cId: number | string, chartId: string, data: CategoricalChartState) => {
-      const { syncId } = this.props;
-
-      if (syncId === cId && chartId !== this.uniqueChartId) {
+    handleReceiveSyncEvent = (cId: number | string, data: CategoricalChartState) => {
+      if (this.props.syncId === cId) {
         this.clearDefer();
         this.cancelDefer = deferer(this.applySyncEvent.bind(this, data));
       }
@@ -1659,10 +1645,8 @@ export const generateCategoricalChart = ({
     };
 
     triggerSyncEvent(data: CategoricalChartState) {
-      const { syncId } = this.props;
-
-      if (!_.isNil(syncId)) {
-        eventCenter.emit(SYNC_EVENT, syncId, this.uniqueChartId, data);
+      if (this.props.syncId !== undefined) {
+        eventCenter.emit(SYNC_EVENT, this.props.syncId, data);
       }
     }
 
diff --git a/src/util/Events.ts b/src/util/Events.ts
index 5460186567..74bafaccf4 100644
--- a/src/util/Events.ts
+++ b/src/util/Events.ts
@@ -2,19 +2,11 @@ import EventEmitter from 'eventemitter3';
 
 type CategoricalChartState = import('../chart/generateCategoricalChart').CategoricalChartState;
 
-interface EventCenter extends EventEmitter<EventTypes> {
-  setMaxListeners?(maxListeners: number): void;
-  _maxListeners?: number;
-}
-const eventCenter: EventCenter = new EventEmitter();
-
-if (eventCenter.setMaxListeners) {
-  eventCenter.setMaxListeners(10);
-}
+const eventCenter: EventEmitter<EventTypes> = new EventEmitter();
 
 export { eventCenter };
 export const SYNC_EVENT = 'recharts.syncMouseEvents';
 
 interface EventTypes {
-  [SYNC_EVENT](syncId: number | string, uniqueChartId: string, data: CategoricalChartState): void;
+  [SYNC_EVENT](syncId: number | string, data: CategoricalChartState): void;
 }
diff --git a/test/chart/LineChart.spec.tsx b/test/chart/LineChart.spec.tsx
index 35e2cc44e9..5e92ebd172 100644
--- a/test/chart/LineChart.spec.tsx
+++ b/test/chart/LineChart.spec.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
-import type { JSX } from '@babel/types';
 
 import { LineChart, Line, XAxis, YAxis, Tooltip, Brush, CartesianAxis, Legend } from '../../src';
 
@@ -393,9 +392,9 @@ describe('<LineChart />', () => {
 describe('<LineChart /> - Pure Rendering', () => {
   const pureElements = [Line];
 
-  const spies: Array<jest.SpyInstance<JSX.Element | null, []>> = [];
+  const spies: Array<jest.SpyInstance<React.ReactElement | null, []>> = [];
   // CartesianAxis is what is actually render for XAxis and YAxis
-  let axisSpy: jest.SpyInstance<JSX.Element | null, []>;
+  let axisSpy: jest.SpyInstance<React.ReactElement | null, []>;
 
   // spy on each pure element before each test, and restore the spy afterwards
   beforeAll(() => {
@@ -475,9 +474,9 @@ describe('<LineChart /> - Pure Rendering', () => {
 describe('<LineChart /> - Pure Rendering with legend', () => {
   const pureElements = [Line];
 
-  const spies: Array<jest.SpyInstance<JSX.Element | null, []>> = [];
+  const spies: Array<jest.SpyInstance<React.ReactElement | null, []>> = [];
   // CartesianAxis is what is actually render for XAxis and YAxis
-  let axisSpy: jest.SpyInstance<JSX.Element | null, []>;
+  let axisSpy: jest.SpyInstance<React.ReactElement | null, []>;
 
   // spy on each pure element before each test, and restore the spy afterwards
   beforeAll(() => {
@@ -751,7 +750,7 @@ describe('<LineChart /> - Rendering two line charts with syncId', () => {
     expect(container.querySelectorAll('.recharts-tooltip-cursor')).toHaveLength(2);
 
     // make sure tooltips display the correct values, synced by data value
-    expect(screen.queryByText('400')).toBeTruthy();
+    expect(screen.queryByText('300')).toBeTruthy();
     expect(screen.queryByText('550')).toBeTruthy();
 
     // Check the activeDots are highlighted