jsx.intrinsicelements does not exist 2339 when using custom-element

Question

I've created a custom-element with lit 2.0 (using typescript)

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

export class VVButton extends LitElement {

  render() {
    return html`
      <button style="background-color: red;"><slot></slot></button>
    `;
  }
}

customElements.define('vv-button', VVButton);

I've uploaded to private npm package.. the code is compiled and tested on html file and all is good.

I tried to import the package on existing project which also using Typescript, see below my file:

import '@vv-web-components/button-tmp';

const ProjectsActions = (): JSX.Element => {
    const options: IconOption[] = [
        { id: 'find', ariaLabel: 'Find', icon: <Magnify /> },
        { id: 'sort', ariaLabel: 'Sort', icon: <ArrowDown /> },
    ];

    return (
        <Flex marginY={'auto'} direction={'row'}>
            <Options iconOptions={options} />
            <NewProjectDialog buttonText={'Create new project'} />
            <vv-button>click here</vv-button>
        </Flex>
    );
};

export default ProjectsActions;

The thing is that I got error when using <vv-button>click here</vv-button> The import '@vv-web-components/button-tmp' is the npm package (private package).

the error is

Property 'vv-button' does not exist on type 'JSX.IntrinsicElements'.ts(2339)

how can I fix it ?

---

Edit/ Progress update: I took @aleksxor advice, and added global declare on the website code (not in package), it's not OK - I don't want to add workarounds on my code (package code will be OK) see this is how it looks now:

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
   
export class VVButton extends LitElement {

  render() {
    return html`
      <button style="background-color: red; width: 50px; height: 30px;"></button>
    `;
  }
}

and in my website code:

import '@vv-web-components/button-tmp'

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace JSX {
        interface IntrinsicElements extends HTMLElement {
            // eslint-disable-next-line max-len
            'vv-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement>; 
        }
    }
}

const ProjectsActions = (): JSX.Element => {
    const options: IconOption[] = [
        { id: 'find', ariaLabel: 'Find', icon: <Magnify /> },
        { id: 'sort', ariaLabel: 'Sort', icon: <ArrowDown /> },
    ];

    return (
        <Flex marginY={'auto'} direction={'row'}>
            <Options iconOptions={options} />
            <NewProjectDialog buttonText={'Create new project'} />
            <vv-button>Button Text</vv-button>
        </Flex>
    );
};

export default ProjectsActions;

This works partially, the "Button Text" doesn't displayed in the button! and as I said above, I can't add this declare in my website code.. is there a way to add it in the package code ?