ReactJS : How to use ReactMarkDown?

Hey I'm trying to figure out how to use ReactMarkDown.

Any idea how to use this ?

import ReactMarkdown from 'react-markdown';

const About = () => {

const input = `### There are many variations of passages of Lorem Ipsum available

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'`
 
return (
  <div>
    <ReactMarkdown source={input}/> // Wont display :'(
  </div>
);
};

export default About;

Yes, you need to read the documentation of library, you can find in the npm page or in github project. Essentially you can do in two way.

First pass props to component:

import ReactMarkdown from "react-markdown";

const About = () => {
  const input = `### There are many variations of passages of Lorem Ipsum available

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'`;

  return <div>
      <ReactMarkdown children={input} />
    </div>

};

Second insert markdown text inside the component

import ReactMarkdown from "react-markdown";

const About = () => {
  const input = `### There are many variations of passages of Lorem Ipsum available

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'`;

  return (
    <div>
      <ReactMarkdown>{input}</ReactMarkdown>
    </div>
  );
};