Error while using Tiny popover library with React and Storybook

so I am using this npm package : https://github.com/alexkatz/react-tiny-popover in my react project with storybook and I can't figured ou what's the problem.

I've C/C the exemple code to my component and nothing show::

There is my folder architecture :

Popover.interface.tsx :

    /**
     * Badge Max digit
     */
     isVisible?: boolean | undefined ;

    };

My component : Popver.tsx

import { Popover, ArrowContainer } from 'react-tiny-popover';
import PopoverProps from './Popover.interface';

const [isPopoverOpen, setIsPopoverOpen] = useState(false);
export const PopoverC = ({
  ...props
}: PopoverProps) => {
  return (
    <Popover
      isOpen={isPopoverOpen}
      positions={['top', 'right', 'left', 'bottom']}
      padding={10}
      onClickOutside={() => setIsPopoverOpen(false)}
      content={({ position, childRect, popoverRect }) => (
        <ArrowContainer // if you'd like an arrow, you can import the ArrowContainer!
          position={position}
          childRect={childRect}
          popoverRect={popoverRect}
          arrowColor={'blue'}
          arrowSize={10}
          arrowStyle={{ opacity: 0.7 }}
          className='popover-arrow-container'
          arrowClassName='popover-arrow'
        >
          <div
            style={{ backgroundColor: 'blue', opacity: 0.7 }}
            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
          >
        Hi! Im popover content. Heres my position: {position}.
          </div>
        </ArrowContainer>
      )}
    >
      <button onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
    Click me!
      </button>
    </Popover>);
};

Popover.displayName = 'Popover';
export { Popover };

and my stories : Popover.stories :

import { PopoverC } from './Popover';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Popover',
  component: PopoverC,
} as ComponentMeta<typeof PopoverC>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof PopoverC> = (args) => <PopoverC {...args} />;

// Use Args
export const Primary = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Primary.args = {
  isVisible: true,
};

export const Secondary = Template.bind({});
Secondary.args = {
  isVisible: false,
};

there is the error I get in my storybook app :

Cannot read properties of undefined (reading 'displayName')
TypeError: Cannot read properties of undefined (reading 'displayName')
    at displayName (http://localhost:6006/vendors~main.iframe.bundle.js:7575:22)
    at parseReactElement (http://localhost:6006/vendors~main.iframe.bundle.js:111708:21)
    at reactElementToJsxString (http://localhost:6006/vendors~main.iframe.bundle.js:112191:21)
    at http://localhost:6006/vendors~main.iframe.bundle.js:7587:103
    at http://localhost:6006/vendors~main.iframe.bundle.js:122572:17
    at mapIntoArray (http://localhost:6006/vendors~main.iframe.bundle.js:122469:23)
    at Object.mapChildren [as map] (http://localhost:6006/vendors~main.iframe.bundle.js:122571:3)
    at renderJsx (http://localhost:6006/vendors~main.iframe.bundle.js:7584:71)
    at jsxDecorator (http://localhost:6006/vendors~main.iframe.bundle.js:7662:18)
    at http://localhost:6006/vendors~main.iframe.bundle.js:12657:21

If anyone have clue or now what's the error let me know