Case 1 - events - index.js

import { lazy } from "react";

const PushEvent = lazy(() => import(`./PushEvent`));
const ReleaseEvent = lazy(() => import(`./ReleaseEvent`));
const StatusEvent = lazy(() => import(`./StatusEvent`));
const NullEvent = lazy(() => import(`./NullEvent`));

export { PushEvent, ReleaseEvent, StatusEvent, NullEvent };

Case 1 - events - NullEvent.js

import React from "react";
const NullEvent = () => <></>;
export default NullEvent;

Case 1 - events - PushEvent.js

import React from "react";
const PushEvent = () => <div class="event">Push Event</div>;
export default PushEvent;

Case 1 - events - ReleaseEvent.js

import React from "react";
const ReleaseEvent = () => <div class="event">Release Event</div>;
export default ReleaseEvent;

Case 1 - events - StatusEvent.js

import React from "react";
const StatusEvent = () => <div class="event">Status Event</div>;
export default StatusEvent;