\n * {state => (\n * \n * I\'m a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `\'entering\'`\n * - `\'entered\'`\n * - `\'exiting\'`\n * - `\'exited\'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the "Enter" stage. During this stage, the component will shift from\n * its current transition state, to `\'entering\'` for the duration of the\n * transition and then to the `\'entered\'` stage once it\'s complete. Let\'s take\n * the following example (we\'ll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *