react-markdown – fix ordered list behaviour

Here is a code:

Problem:
Children is a text typed by user, for example:
22. Test1
44. Test2
66. Test3

Edit: Even here (while creating this question), when I tried to write ordered list, the preview automatically convert to own numbering from 1 – that’s way this is in single line.

The TextDisplay component returns:

  1. Test1
  2. Test2
  3. Test3

So component ignores my own numbering (22,44,66) and start counting from 1.

Question: How to keep numbering 22,44,66? Is it normal behaviour / default when we use ordered list? Can I do something to avoid overwriting numbering by user with default 1,2,3..

import React from 'react';
import ReactMarkdown from 'react-markdown';

import * as Styled from './TextDisplay.styles';

const allowedElements = ['br', 'p', 'em', 'strong', 'a', 'img', 'ul', 'ol', 'li', 'hr'];

type Props = {
  children: string;
  className?: string;
};

const TextDisplay = ({ children, className }: Props) => (
  <Styled.TextDisplay className={className}>
    <ReactMarkdown
      allowedElements={allowedElements}
      components={{
        p: Styled.Paragraph,
        strong: Styled.Strong,
        em: Styled.Emphasis,
        ul: Styled.List,
        li: Styled.ListItem,
        ol: Styled.OrderedList,
        a: Styled.Link,
        hr: Styled.HorizontalLine,
      }}
    >
      {children}
    </ReactMarkdown>
  </Styled.TextDisplay>
);

export default TextDisplay;


const List = styled.ul`
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 20px;
`;

const OrderedList = styled(List).attrs({ as: 'ol' })`
  list-style-type: decimal;
`;

const ListItem = styled.li`
  display: list-item;
  text-align: match-parent;
`;