I’m very new to React and SPFx.
I was trying to use the Monaco Editor component from @pnp/spfx-controls-react in a SPFx Web Part.
I have the editor, in which the user can write custom css. I also have a color picker with buttons to set the selected color as Primary or Secondary. I was wondering how can I replace the text value in the Monaco Editor once clicking these buttons.

:root {
 --primaryColor: /*value to replace*/;
--secondaryColor: /*value to replace*/;
}

To be clear, it is not the logic of the replace I’m asking for. The problem is I don’t know how to set Monaco Editor value on button click.

I used to have an HTML textarea that worked with a ref. I wanted to use the Monaco Editor because it looks nicer but I’m not at all exeperienced and I don’t know how to proceed.