How to target .ui.input class of a Semantic UI React Search component instance using CSS modules?

Question

I'm an experienced developer, but I'm learning React and putting together a simple example project using Semantic UI React. I'm trying to change the width of a Search component instance. Seems easy enough but I've tried several different methods without success.

Objective: Target the .ui.input selector of the Search component and set the width property to 100%

Let's get to some code...

header.tsx

import classNames from 'classnames';
import styles from './header.module.scss';
import { Search } from 'semantic-ui-react';
import { Avatar } from '../avatar/avatar';

export interface HeaderProps {
    className?: string;
}

export const Header = ({ className }: HeaderProps) => {
    return <div className={classNames(styles.root, className)}>
        <div className={styles.BrandingContainer}>
            <img src="https://placehold.co/35" alt="Maker" /></div>


        {/* This is section of code we're focusing on */}
        <div className={styles.SearchContainer}>
            <Search
                size="small"
                placeholder="Search"
            />
        </div>


        <div className={styles.AvatarContainer}>
            <Avatar />
        </div>
    </div>;
};

header.module.scss

.SearchContainer {
  width: 500px;
  background-color: aliceblue;

  .ui.input {
    width: 100%;
  }
}

By all accounts, this should work. When I compile, view in the browser, and inspect, the descendent selector .ui.input and the width property aren't picked up and the width of the Search component doesn't change.

If I manually add the width property to .ui.input in the Developer Tools panel (Elements > Styles), I get the expected result that the Search component extends to the width of its parent container.

Not sure what I'm doing wrong? Thanks in advance for guidance.