Стилизованные компоненты не работают на Navbar.Brand. bootstrap.

Question

Я пытаюсь сделать что-то столь же простое, как изменить текст Navbar.Brand текст на белый, используя стилизованные компоненты.

Интересно, что похоже, что применяются другие свойства, а цвет текста - нет.

Дополнительный вопрос, распознается ли элемент как элемент Navbar.Brand bootstrap, если это реализовано?

import React from "react";
import { Nav, NavDropdown, Form, FormControl, Button } from "react-bootstrap";
import Navbar from "react-bootstrap/Navbar";
import styled from "styled-components";

const Style = styled(Navbar.Brand)`
  color: white;
`;

export const MenuBar = () => (
  <Navbar bg="light" fixed="top">
    <Style>TestSite</Style>                   
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#link">Link</Nav.Link>
        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
          <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
        </NavDropdown>
      </Nav>
      <Form inline>
        <FormControl type="text" placeholder="Search" className="mr-sm-2" />
        <Button variant="outline-success">Search</Button>
      </Form>
    </Navbar.Collapse>
  </Navbar>
);