In the development of the Grafana app plugin, the use of SceneTimePicker is not effective

Grafana scenes
1

I am developing a Grafana app plugin, but the SceneTimePicker time change is not affecting my custom panel. Here is my key code:

const TracePluginPanel = new PanelPlugin<TraceVizOptions>(TracePanel);
sceneUtils.registerRuntimePanelPlugin({ pluginId: 'trace-panel', plugin: TracePluginPanel });

  return new EmbeddedScene({
    $timeRange: defaultTimeRange,
    $variables: new SceneVariableSet({ variables: variables }),
    body: new SceneFlexLayout({
      children: [
        new SceneFlexItem({
          width: '100%',
          height: '100%',
          body: new VizPanel({
            pluginId: 'trace-panel',
            options: {
              category: category,
            },
            title: '',
            headerActions: tabHeaderAction
          }),
        }),
      ],
    }),

    controls: [ new SceneTimePicker({}), refreshSence]

this’s tracePanel code

function TracePanel(this: any, props: Props) {
const { replaceVariables, options } = props;

/**
 * In the Grafana component props, there is a 'timeRange' field, which can be monitored when developing a custom panel.
 * However, for some reason, the 'timeRange' doesn't seem to change in a custom plugin within the scene app.
 * I couldn't find a solution, so in the end, I used the default global variables provided by Grafana, '$__from' and '$__to', to get the values of the currently selected time.
 */
const from = replaceVariables('$__from');
const to = replaceVariables('$__to');