JSCPD code duplication linter giving a false positive in next.js project - next.js

Question

I recently found out about GitHub actions superlinter which uses JSCPD to check for code duplication. It worked initially but I'm running into one specific false positive and I can't figure it out. JSCPD also has a package on npm and I tested it locally on that single file but it errored too. I have also tried adding new lines below but it didn't work too. The code and error are below.
Error:
2022-12-14 08:21:48 [INFO] File:[/github/workspace/components/pages/editor/sidebar/index.tsx]
2022-12-14 08:21:49 [ERROR] Found errors in [jscpd] linter!
2022-12-14 08:21:49 [ERROR] Error code: 1. Command output:
------
Clone found (tsx):
- /github/workspace/components/pages/editor/sidebar/index.tsx [40:7 - 58:3] (18 lines, 167 tokens)
/github/workspace/components/pages/editor/sidebar/index.tsx [37:7 - 51:2]
Clone found (tsx):
- /github/workspace/components/pages/editor/sidebar/index.tsx [40:7 - 58:3] (18 lines, 167 tokens)
/github/workspace/components/pages/editor/sidebar/index.tsx [37:7 - 51:2]
40 │ 37 │ <i className={"icon-search"}></i>
41 │ 38 │ </GenButton>
42 │ 39 │
43 │ 40 │ <GenButton props={{ label: "Sidebar: save" }}>
44 │ 41 │ <i className={"icon-floppy"}></i>
45 │ 42 │ </GenButton>
46 │ 43 │
47 │ 44 │ <GenButton props={{ label: "Sidebar: language" }}>
48 │ 45 │ <i className={"icon-globe"}></i>
49 │ 46 │ </GenButton>
50 │ 47 │
51 │ 48 │ <GenButton props={{ label: "Sidebar: launch" }}>
52 │ 49 │ <i className={"icon-rocket"}></i>
53 │ 50 │ </GenButton>
54 │ 51 │
55 │ 52 │ <GenButton props={{ label: "Sidebar: more info" }}>
56 │ 53 │ <i className={"icon-info-circled"}></i>
57 │ 54 │ </GenButton>
58 │ 55 │ </
Found 1 clones.
ERROR: jscpd found too many duplicates (11.18%) over threshold (0%)
Error: ERROR: jscpd found too many duplicates (11.18%) over threshold (0%)
at ThresholdReporter.report (/node_modules/#jscpd/finder/dist/reporters/threshold.js:12:19)
at /node_modules/#jscpd/finder/dist/in-files-detector.js:82:26
at Array.forEach (<anonymous>)
at /node_modules/#jscpd/finder/dist/in-files-detector.js:81:28
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
------
Code:
import { memo, useContext } from "react";
import ContextIndex from "../../../../utils/context/index";
import ContextGlobal from "../../../../utils/context/_global";
import GenButton from "../../../gen/button";
import GenImage from "../../../gen/image";
import EditorFileExplorer from "./fileExplorer";
import styles from "./index.module.css";
const EditorSidebar: React.FC = () => {
const { isLightTheme, setIsLightTheme, session } = useContext(ContextGlobal);
const {
barState: { leftBarOpen, explorerOpen },
updateBarState,
} = useContext(ContextIndex);
function handleAlert() {
alert("Hello World");
}
return (
<>
<section
className={
leftBarOpen ? styles.sidebarSectionOpen : styles.sidebarSection
}
>
<div className={`${styles.flexButtons} hoverParent`}>
<GenButton
props={{
label: "Sidebar: toggle file explorer",
onClick:
session?.user !== undefined
? () => updateBarState({ type: "explorerOpen" })
: handleAlert,
}}
>
<i className={"icon-docs"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: search" }}>
<i className={"icon-search"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: save" }}>
<i className={"icon-floppy"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: language" }}>
<i className={"icon-globe"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: launch" }}>
<i className={"icon-rocket"}></i>
</GenButton>
<GenButton props={{ label: "Sidebar: more info" }}>
<i className={"icon-info-circled"}></i>
</GenButton>
</div>
<div className={`${styles.flexButtons} hoverParent`}>
<GenButton props={{ label: "Sidebar: profile" }}>
{session?.user.image !== undefined ? (
<GenImage
props={{
src: session.user.image,
height: 40,
width: 40,
alt: session.user.name,
className: styles.profileImage,
}}
/>
) : (
<i className={"icon-user-circle"}></i>
)}
</GenButton>
<GenButton
props={{
label: "Sidebar: toggle theme",
onClick: () => setIsLightTheme((prev) => !prev),
}}
>
{isLightTheme ? (
<i className={"icon-toggle-off"}></i>
) : (
<i className={"icon-toggle-on"}></i>
)}
</GenButton>
<GenButton props={{ label: "Sidebar: settings" }}>
<i className={"icon-cog"}></i>
</GenButton>
</div>
</section>
{explorerOpen && <EditorFileExplorer />}
</>
);
};
export default memo(EditorSidebar);