Reactjs – 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.

Update 3

I exported from my component a simply input tag and it works.
Probably some weird errors with React Bootstrap library used as imported from another component.