Error on NextJS with typescript build

[rudenkoserhii]

Hi, I'm new in development.

I need to refactor the code, add some style and remove bugs, but I don't understand how.
I have to errors within:

1. stylelint: Could not find "@ramseyinhouse/stylelint-config". Do you need a configBasedir?
2. ⨯ node_modules@ramseyinhouse\feedback-component\dist\index.umd.js (1:1453) @ HTMLElement
   ⨯ ReferenceError: HTMLElement is not defined
   at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42)
   at eval (./app/components/Feedback/Feedback.tsx:18:25)
   at (ssr)/./app/components/Feedback/Feedback.tsx (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\app\page.js:250:1)
   at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42)
   at eval (./app/page.tsx:14:87)
   at (ssr)/./app/page.tsx (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\app\page.js:327:1)
   at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42)
   at JSON.parse ()
   null
   when I remove component, everything is Ok.
3. I need to change background color buttons. When I changed "background: var(--feedback-component-button-background-color, #e8eced);" nothing happening

Feedback.tsx component:

"use client";

import { useState } from "react";
import LikeIconSvg from "../SVGs/LikeIconSvg";
import DislikeIconSvg from "../SVGs/DislikeIconSvg";
import Script from "next/script";
let feedbackComponent = require("@ramseyinhouse/feedback-component");

declare global {
namespace JSX {
interface IntrinsicElements {
["feedback-component"]: React.DetailedHTMLProps<
React.HTMLAttributes,
HTMLElement
>;
}
}
}
export const Feedback = () => {
const [sadFeedback, setSadFeedback] = useState(false);
const [changeColor, setChangeColor] = useState(false);

const handleFeedback = () => {
setChangeColor(!changeColor);
};

const handleBadFeedback = () => {
setSadFeedback(true);
};

return (
<>
{sadFeedback ? (

<iframe data-tally-src="https://tally.so/embed/mBprE7?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" height="446" title="Feedback" ></iframe>
<Script
id="tally-js"
src="https://tally.so/widgets/embed.js"
onLoad={() => {
Tally.loadEmbeds();
}}
/>

) : (
in next comment component here
)}
</>
);
};

Hope You help me)

[rudenkoserhii]

    <div
      className={`fixed w-fit bottom-[5%] h-fit rounded-md p-[5px] right-[5%] ${
        changeColor === true ? "bg-[#e8fcd7]" : "bg-[#e6fafb]"
      }`}
    >
      <feedback-component onClick={handleFeedback}>
        <span
          slot="cta"
          className="text-[#003558] m-[3px] whitespace-nowrap"
        >
          Was this page helpful?
        </span>
        <span slot="confirmation" className="text-[#4e7a3e]">
          Thank you for your feedback!
        </span>
        <span slot="option-icon:0">
          <LikeIconSvg />
        </span>
        <span slot="option-icon:1" onClick={handleBadFeedback}>
          <DislikeIconSvg />
        </span>
      </feedback-component>
    </div>