Unable to override react-bootstrap using module.css

Im using react bootstrap to make a navbar. Here is the code:

import React from 'react';
import { Link } from "react-router-dom";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import styles from './loginHeader.module.css';

const LoginHeader = () => {
  return (
    <Navbar  bg="white" expand="lg">
    <Container >
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse  id="basic-navbar-nav">
        <Nav className="me-auto">
          <Nav.Link  >Contact</Nav.Link>
          <Nav.Link >Request Demo</Nav.Link>
        </Nav>
        <Nav  >
          <NavDropdown className={styles.sample} title="Register" >
            <NavDropdown.Item >Patient</NavDropdown.Item>
            <NavDropdown.Item ><Link to="/registerOwner" >Owner</Link></NavDropdown.Item>
            <NavDropdown.Item >Doctor</NavDropdown.Item>
          </NavDropdown>
          <Nav.Link><Link to="/" >Login </Link></Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Container>
  </Navbar>

  )
}

export default LoginHeader;

I want to override the text color of dropdown using loginHeader.module.css. Its given as below:

.sample{
    color: #1173bc;
    font-weight: bold; 
}

but its not changing the color. I have tried using !important key word. Still its not working. Any idea on overriding react-bootstrap properly using css module files?