Как сохранить компонент в Const и отрендерить его?

Я новичок в реагировании, и в основном я хочу, чтобы в зависимости от условия (я поставил что-то простое) отображался созданный мной компонент под названием <Button> или отображался <button> из HTML по умолчанию.

Не знаю, что я делаю не так, во всяком случае не работает, ничего не отображается.

Это мой код:

import "./styles.css";
export const Button = ({ children }) => {
  return <button>{children}</button>;
};

export default function App() {
  let Component = "";
  if (1 + 1 == 2) {
    Component = <Button />;
  } else {
    Component = "button";
  }

  return <Component>I am a button</Component>;
}

Это мой живой код:

мой живой код