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