Refactor docs according to new jsx transform

[ghost]

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
Since react 17, we don't need to write like this: import React from "react";
We can just import what we need: import { Children } from "react";
So how about to refactor docs like this?

Before:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles])
    };
~~~

After:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
import { Children } from 'react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: Children.toArray([initialProps.styles])
    };
~~~

[jrgarciadev]

Hey @TroyTae it looks great, would you like to send a PR?

[ghost]

Sure I'll send PR as soon as possible

[ghost]

This discussion is resolved in #601