CKEditor getting displayed twice

Question

I am trying to integrate CKEditor with antd in a React application. This is my code:

 <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        name="content"
        label="Category"
        rules={[
          {
            required: true,
          },
        ]}
      >
      <CKEditor editor={classicEditor} onChange={onCategoryChange} />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button htmlType="button" onClick={onReset}>
          Reset
        </Button>
      </Form.Item>
    </Form>

However, the component is displayed twice after rendering

Is this a bug from antd?

Answer 1

The reason is the React.StrictMode wrapper, in your ReactDOM.render, try to comment or delete strict mode tag,then you will get a single render.