Editorjs Nested List render

NestedListRenderer.js

import React from "react";

const NestedListRenderer = ({ data }) => {
  const ListType = ({ children, style }) =>
    style === "unordered" ? <ul>{children}</ul> : <ol>{children}</ol>;

  const renderWalk = (items) =>
    !!items.length && (
      <ListType style={data.style}>
        {items.map((item) => (
          <React.Fragment key={item.content}>
            <li>{item.content}</li>
            {renderWalk(item.items)}
          </React.Fragment>
        ))}
      </ListType>
    );
  return <div className="nested-list"> {renderWalk(data.items)}</div>;
};

export default NestedListRenderer;

styles.css

.nested-list ol {
    counter-reset: item
}

.nested-list li {
    display: block
}

.nested-list li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}