fix(tabs): wait for TabPanel to mount before setting hidden

[raunofreiberg]

Thank you for contributing to Reach UI! Please fill in this template before submitting your PR to help us process your request more quickly.

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code (Compile and run).
• Add or edit tests to reflect the change (Run with yarn test).
• Add or edit Storybook examples to reflect the change (Run with yarn start).
• Ensure formatting is consistent with the project's Prettier configuration.

This pull request:

• Creates a new package
• Fixes a bug in an existing package
• Adds additional features/functionality to an existing package
• Updates documentation or example code
• Other

---

Closes #561

I don't know if this is the correct solution, but it seems to make sense (?) and work.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 61bcce1:

Sandbox	Source
lucid-brook-4u75o	Configuration

[raunofreiberg]

I wanted to create a demo based on the CodeSandbox build of this branch, but none of the components seem to import for me.

https://codesandbox.io/s/hardcore-hertz-fu7d8

Maybe something up with the build or it's just me? 🤔

---

After further investigation this does not seem to be an anomaly but rather a bug –– I've opened a separate issue for this 👉#586

---

Anyhow, this is the code to reproduce #561

 function Component() {
  const ref = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    // Input does not get focused!
    ref?.current?.focus();
  }, []);

  return (
      <Tabs>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <input ref={ref} />
          </TabPanel>
          <TabPanel>Panel 2</TabPanel>
        </TabPanels>
      </Tabs>
  );
}