Importing an element from my own package returns its string representation in React, why?

I've created an npm package, I installed it on a blank project. Now I want to use it:

import MyComponent from "my-package";

export default function App() {
  console.log("MyComponent =", MyComponent);
  return <MyComponent>yo</MyComponent>;
}

I open the console and I find the strangest thing I've ever seen since I use React:

MyComponent = /static/media/index.6d9900f03bba947f3874.cjs
// it also prints a lot of error because
// React thinks I'm trying to do "</static/media/index.6d9900f03bba947f3874.cjs>yo</static/media/index.6d9900f03bba947f3874.cjs>
// so obviously that is not a valid component:
Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/index.6d9900f03bba947f3874.cjs') is not a valid name.

I suppose it comes from my code... obviously. But I've no idea what I did wrong. Here is the source code of MyComponent:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = MyComponent;

var _StylesModule = _interopRequireDefault(require("./styles/styles.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function MyComponent(_ref) {
  console.log("I'm not being printed in the console :((((, please print me!");
  let {
    oneUselessProp,
    children
  } = _ref;
  return /*#__PURE__*/React.createElement("div", {
    oneUselessProp
  }, children);
}