Invalid hook call importing an external module

I'm writing a package called "Formcomponent", with the help of React + React Bootstrap.

This is the index.tsx

/**
 * Renders a component for a form.
 */
import React from "react";
import Form from "react-bootstrap/Form";

/**
 * List of props
 * @returns
 */
interface FormcomponentProps {
  name: string;
}

export const Formcomponent = ({ name }: FormcomponentProps) => {
  return (
    <Form.Group controlId={name}>
      {/* input text */}
      <Form.Label>{name}</Form.Label>
      <Form.Control type="text" name={name} />
    </Form.Group>
  );
};

When I build it, I got in dist:

index.d.ts

/**
 * Renders a component for a form.
 */
import React from "react";
/**
 * List of props
 * @returns
 */
interface FormcomponentProps {
    name: string;
}
export declare const Formcomponent: ({ name }: FormcomponentProps) => React.JSX.Element;
export {};

and

index.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Formcomponent = void 0;
/**
 * Renders a component for a form.
 */
var react_1 = __importDefault(require("react"));
var Form_1 = __importDefault(require("react-bootstrap/Form"));
var Formcomponent = function (_a) {
    var name = _a.name;
    return (react_1.default.createElement(Form_1.default.Group, { controlId: name },
        react_1.default.createElement(Form_1.default.Label, null, name),
        react_1.default.createElement(Form_1.default.Control, { type: "text", name: name })));
};
exports.Formcomponent = Formcomponent;

I import in another React project in package.json as "@sineverba/form-component": "file:../../personali/npm-pkg-form-component", and in the App.jsx of React project I use it as

import * as React from "react";
import { Form } from "react-bootstrap";
import { Formcomponent } from "@sineverba/form-component";

export const App = () => {
  return (
    <Form>
      <FormComponent name="ciao" />
    </Form>
  );
};

export default App;

But I got in console

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: [...]

and

Uncaught TypeError: Cannot read properties of null (reading 'useMemo') at FormGroup.js:11:26

(FormGroup.js from react bootstrap is defined as

import * as React from 'react';
import { useMemo } from 'react';
import FormContext from './FormContext';
import { jsx as _jsx } from "react/jsx-runtime";
const FormGroup = /*#__PURE__*/React.forwardRef(({
  controlId,
  // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
  as: Component = 'div',
  ...props
}, ref) => {
  const context = useMemo(() => ({
    controlId
  }), [controlId]);
  return /*#__PURE__*/_jsx(FormContext.Provider, {
    value: context,
    children: /*#__PURE__*/_jsx(Component, {
      ...props,
      ref: ref
    })
  });
});
FormGroup.displayName = 'FormGroup';
export default FormGroup;

Update 1

In index.tsx (external component) I imported React as import * as React from "react"; but got same errors.

Update 2

I uploaded the repository here: https://github.com/sineverba/npm-pkg-form-component

Of course it is not published (yes), to test it can be cloned on local and used with "@sineverba/form-component": "file:../../personali/npm-pkg-form-component"

A small news. I tried to export a simply <p>Hello World</p> (so a simple HTML) and it works only if I use as name Formcomponent and not FormComponent (see the capital of C).

By the way, changing the name to Formcomponent and introducing the React Bootstrap Form, got same errors.

from Invalid hook call importing an external module