here I just copy and paste the modal to see if it works. But the onClick function is not recognized I don't understand. Should I do an import linked to flowbite ? a js file or something like that ?

LoginModalButton.tsx

import { FC } from 'react';
import { useDisclosure } from './modalDisclosure/use-disclosure';
import { ActionButton } from '../ActionButton';
import { LoginComponent } from './LoginComponent';
import { useEffectOnlyOnUpdate } from '../../hooks/tools/useEffectOnlyOnUpdate';
import { useLogin } from '../../hooks/auth/useLogin';
import { useLogout } from '../../hooks/auth/useLogout';
import { setLoggingInState } from '../../store/auth';
import React from 'react';
import { Button, Modal } from 'flowbite-react';

interface LoginModalButtonProps {
  onClose?: () => void;
  onOpen?: () => void;
}

const CustomModalOverlay = () => {
  return (
    <div className="fixed left-0 top-0 w-screen h-screen bg-backAlpha700 backdrop-blur-sm" />
  );
};

export const LoginModalButton: FC<LoginModalButtonProps> = ({
  onClose,
  onOpen,
}) => {
  const { isLoggedIn, isLoggingIn } = useLogin();
  const { logout } = useLogout();
  const {
    isOpen: opened,
    onOpen: open,
    onClose: close,
  } = useDisclosure({ onClose, onOpen });

  useEffectOnlyOnUpdate(() => {
    if (isLoggedIn) {
      close();
    }
    if (!opened) {
      setLoggingInState('error', '');
    }
  }, [opened, isLoggedIn]);

  return (
    <React.Fragment>
      <Button onClick={onClick}>Toggle modal</Button>
      <Modal show={false} onClose={onClose}>
        <Modal.Header>Terms of Service</Modal.Header>
        <Modal.Body>
          <div className="space-y-6">
            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
              With less than a month to go before the European Union enacts new
              consumer privacy laws for its citizens, companies around the world
              are updating their terms of service agreements to comply.
            </p>
            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
              The European Union’s General Data Protection Regulation (G.D.P.R.)
              goes into effect on May 25 and is meant to ensure a common set of
              data rights in the European Union. It requires organizations to
              notify users as soon as possible of high-risk data breaches that
              could personally affect them.
            </p>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={onClick}>I accept</Button>
          <Button color="gray" onClick={onClick}>
            Decline
          </Button>
        </Modal.Footer>
      </Modal>
    </React.Fragment>
  );
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
  ],
  [........]
  plugins: [
    require('flowbite/plugin')
  ],
};


When I move my mouse over flowbite/plugin I get this: "The declaration file of the module 'flowbite/plugin' cannot be found. /home/elrond-dev/WORKSPACE/pandawans-nft-minter-nextjs-dapp/node_modules/flowbite/plugin.js' has implicitly a type 'any'.
  Try 'npm i --save-dev @types/flowbite' if it exists, or add a new declaration file (.d.ts) containing 'declare module 'flowbite/plugin';'ts(7016)"