Создание компонента кнопки React, его импорт и добавление текста к кнопке

поэтому я пытаюсь создать повторно используемый компонент кнопки React, который я могу импортировать в другие компоненты.

Я создал компонент, экспортировал его и импортировал в другой компонент, где я хочу его использовать.

Теперь, если я использую <Button>TEXT</Button> внутри другого моего компонента, ТЕКСТ не появляется. Я нуб в React, очевидно.

Компонент кнопки реакции:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
    width: 138px;
    height: 35px;
    text-align: center;
    letter-spacing: 0px;
    color: #FFFFFF;
    background: #5DA7DE 0% 0% no-repeat padding-box;
    box-shadow: 10px 10px 10px #00000066;
    opacity: 0.86;
    color: white;
`;

export const ButtonBlue = () => {
  return (
<Button/>
  );
};

Компонент React, где я хочу использовать кнопку:

import React from 'react'
import styled from 'styled-components';
import { ButtonBlue as Button } from '../Buttons/ButtonBlue.jsx'

const Container = styled.div`
    width: 80%;
    min-height: 300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-bottom: 100px;
`

export const LandingBottomLatestEvents = () => {
    return (
    <Container>
        <Button>TEXT</Button>
    </Container>
    )
}

Проверил Google, но пока не нашел решения.

Любая помощь приветствуется. Спасибо!!