Collapse component: in property is not working when setting it initially to true

Bug report

Describe the bug

The Collapse component isn’t open when specifying it.

To reproduce

Create a way of opening and closing the collapse with the initial state set as open. I’m using the useDisclosure hook.

const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });

Create a button for opening and closing the collapse:

<Button onClick={onToggle} size={"sm"}>
    {isOpen ? "Hide" : "Show"} collapse
</Button>

Create a Collapse component and use the previous state you created.

<Collapse in={isOpen} animateOpacity>
...
</Collapse>

Go to the browser, there you can see that the collapse isn’t open by default. Once you click the button, the collapse will open and close very fast, then when you click the button for the 2nd time the collapse will work as expected.

Minimal reproduction

I created a repository with a minimal reproduction of the issue: https://github.com/javierriveros/chakra-collapse-issue

Expected behavior

Collapse should be open by default when I specify it using the state variable.

System information

• Version of @chakra-ui/react: 1.0.0

• Version of React: 17.0.1

Additional context

This was not a problem with the release candidate 1.0.0-rc8

[harshzalavadiya]

Temporary using unmountOnExit={true} will make it work as expected

[lunaticcoding]

@segunadebayo Took me quite a while to find this here 😃 the documentation on the website right here still calls the in argument isOpen. 😃 Maybe you could update it.