reactjs - Fel vid användning av Tiny popover-biblioteket med React och Storybook

så jag använder detta npm-paket: https://github.com/alexkatz/react-tiny-popover i mitt react-projekt med storybook och jag kan inte lista ut vad problemet är.

Jag har kopierat exempelet på koden till min komponent och inget visas::

Här är min mapparkitektur:

Popover.interface.tsx :

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

    };

Min komponent: 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 };

och mina berättelser : 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,
};

det är felet jag får i min 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

Om någon har en aning eller vet vad felet är, låt mig veta

Svar #1

För att svara på din fråga direkt, tilldelar du ett visningsnamn till den ursprungliga 'Popover'-komponenten, inte din anpassade wrapper. Jag vet inte varför du skulle behöva göra det från första början eftersom det beteendet vanligtvis är implicit när man exporterar komponenter, om du inte genererar komponenter med en fabriksfunktion.

Kanske relaterat men ändå bryter koden, du har ditt tillstånd definierat utanför komponenten vilket är ett nej-nej. Jag skulle försöka flytta tillståndet inuti komponentomslaget.

Jag kan inte komma på någon övertygande anledning att återexportera 'Popover' eftersom detta borde vara åtkomligt direkt från paketet.