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

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);