CreateEsriMapWidget and the Observable Overhaul

We have the ESRI elevation profile widget wrapped using CreateEsriMapWidget.  Within useEffect there are when and watch methods.  How should the new Observable methods be used on a wrapped esri widget.

Below is some code that works but has the watch deprecated notice.  The code below hides the profile legend until the user has finished drawing, at which point the legend is displayed and the query item is expanded to show the results.

We have tried a number of ways to get the wrapped widget to work with observableUtils but haven't had any luck yet.

Overhaul reference page: https://developers.vertigisstudio.com/blog/2025/08/05/web-observable-overhaul

export type ElevationProfileWidgetProps = MapWidgetProps<
    ElevationProfileModel & Accessor
>;

const ElevationProfileWidgetWrapper = createEsriMapWidget<
    ElevationProfileModel & Accessor,
    ElevationProfileWidget
>(ElevationProfileWidget, true, true);

export default function ElevationProfile(
    props: ElevationProfileWidgetProps
): ReactElement {
    const { model } = props;
    const { map } = model;
    const [widget, setWidget] = useState<ElevationProfileWidget>();

    useWatchAndRerender(map, ["map", "viewMode"]);
    useWatchAndRerender(model, [
        "title",
        "legend",
        "chart",
        "clearButton",
        "settingsButton",
        "sketchButton",
        "selectButton",
        "uniformChartScalingToggle",
        "profileLineQuery",
        "profileLineGround",
        "profileLineInput",
        "profileLineView",
        "profileLineQueryColor",
        "profileLineGroundColor",
        "profileLineInputColor",
        "profileLineViewColor",
    ]);
    useEffect(() => {
    
    	 widget.when(() => {
            
            const instructionElements = widget.container.querySelectorAll(
                '.esri-elevation-profile-legend'
            );

            // hide legend initially
            instructionElements.forEach(element => {
                element.setAttribute("style","display:none;");                
            });
                        
            watch(
                () => widget.viewModel.state,
                (stateString) => {
                    
                    if(stateString === "created")
                    {
                        instructionElements.forEach(element => {
                            element.setAttribute("style","display:contents;");                        
                        });

                        const toggleElements = widget.container.querySelectorAll(
                            '.esri-elevation-profile-legend-item__collapse-toggle'
                        );

                        toggleElements.forEach(element => {                            

                            if(element.getAttribute("icon") === "chevron-down")
                            {
                                const host = element;                            
                                const toggleButton:any = host.shadowRoot.querySelector(".button");                                                
                                if (toggleButton) {
                                    toggleButton.click(); // Simulate user expanding the legend
                                }
                            }                        
                        });
                    }
                    else if(stateString === "ready" || stateString === "creating")
                    {
                        instructionElements.forEach(element => {
                            element.setAttribute("style","display:none;");                        
                        });
                    }
                }
            );
            
            widget.renderNow();
        }).
        catch(() => {});
    
    }