When using modifiers in TSX, the required object and what the type hinting thinks is needed seem to be at odds with each other

[liamNM]

https://codesandbox.io/s/react-popper-v2x-issue-template-forked-z46v6?file=/src/index.tsx

I can't get the template to load but I've commented the code to show you what does/doesn't work for me in TSX

Steps to reproduce the problem

1. make sure you're coding in a TSX file
2. check the modifiers type as per the documented expected value and the popover does not offset
3. remove the documented array and add the object version I have in my code
4. you may need to add all the TS ignores required to render with the object directly in the

       // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
       // @ts-ignore
       modifiers={popperModifiers}

What is the expected behavior?

Using the TSX type hinting I should be able to use the required object/array to modify the position of the tool tip

What went wrong?

Using the documented/type hinted object the offset does not alter its position

Any other comments?

It may just be a loop is missing to apply the modifiers?

Packages versions

"@popperjs/core": "^2.4.4", "react-popper": "2.2.3"

[liamNM]

Hmm.. the minimal version I did in the sandbox works.. Problem is very likely on my end.

[liamNM]

Appreciate this is not a 'you guys' thing but any idea why it might be looking for the v1 syntax but typehinting to the v2 stuffs? Don't suppose there are any known conflicts with Storybook?

[FezVrasta]

AFAIK stable Storybook versions use Popper v1, and it has some conflicts if you try to use the v2 at the same time.

[liamNM]

Nailed it. https://raw.githubusercontent.com/storybookjs/storybook/next/yarn.lock

popper.js@^1.14.4:
  version "1.16.1"
  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==

I'll raise the issue with them