Is it possible to create a dynamic page using textarea and react components?

Question

React

I want to use a textarea field and react components to create a form. The components will be written inside the text area and the structure of the components will be displayed at the bottom. I want to store this row in the database so that I can retrieve it. later and somehow convert it to a jsx page. basically, everything i said is very similar to markdown, but all i want to do is use react components only. Are popular packages designed for this?

example

const Prism = ({ language }) => {
  return <div style={{ color: "#45E700" }}>{language}</div>;
};

export default function App() {
  const [text, setText] = useState(`<Prism language={"javascript"}/>`);
  return (
    <div>
      <textarea
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
     <Render src={text} />
    </div>
  );
}