How to change the styling of web components that wraps a react component

I have a web component that wraps around a react component. There are some divs in the react component that I want to change the border radius of. Here's the code in Base.tsx

export abstract class Base extends BaseReactElement {
    static get styles() {
        return [
            unsafeCSS(processCssText(reactStyles)),
            unsafeCSS(processCssText(styles)),
            css`
                :host,
                :host > div,
                :host > div > div {
                    display: block;
                    width: 100%;
                }

              #test {
                border-radius: var(--test-border-radius, 0);
              }

I want to change the value of test-border-radius. I have web component that calls which is wraps around Base.tsx React component. How can I change the value of test-border-radius when calling hs-dialog?