How to create dynamic component name in React?

Question

React

Hello everyone
Actually, I want to dynamically create components with icons.
Here's how it looks:
importing an icon from above:

import {Dashboard as MdDashboard}  from "react-icons/lib/md/dashboard"

output in map:

const content = sidebar ? (
      sidebar.map((element, index) => {
        return (
          <li key={index}>
            <div className="icon">
            //тут вывод
            </div>
            <a href="#">{element}</a>
          </li>
        );
      })
    ) : (
      <div>Loading, please, waits</div>
    );

Actually, you need something like this

<div className="icon">
<{element} />
</div>

But it gives me an error. How can you check it here? {element} matches import alias
And it didn't work :(

<div className="icon">
                  {React.createElement(
                      element,
                      {size: 14}
                  )} 
                </div>