Отображать разметку html в реакции jsx

Хотел отобразить прямо html-разметку в моем шаблоне.

Вот файл, в котором я пишу html-код, который хочу отобразить. Я хочу отобразить все элементы html.

import React from 'react';

const html = (
  <div>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
      </ul>
  </div>
);

export default html

файл компонента

import React, { Component } from 'react';
import html from './code/htmlCodeSnippet';

...
  render() {
    return (
      <div>
        {html}
      </div>
    )
  }
}

Я импортирую этот html-файл для отображения в моем компоненте. Я буду использовать html-подсветку для отображения кода.

Всякий раз, когда я ссылаюсь на {html}, он не показывает все элементы html. Это просто показывает, как

1
2
3