sharepoint online – Trigger Republish button using spfx extension while on edit mode

I am trying to manually trigger the republish event while editing the SharePoint page using spfx extension as below . but there is a error in savePage api . is there way to do it ?

enter image description here

 const publish = async() => {
            const canvasAPI = `${context.absoluteUrl}/_api/sitepages/pages(${})`;
            const _data = await context.spfxContex.spHttpClient.get(canvasAPI, SPHttpClient.configurations.v1);
            if(_data.ok) {
              const reslut = await _data.json();
              if(reslut) {
                const canvas = JSON.parse(reslut.CanvasContent1);
                const sptOpts: ISPHttpClientOptions = {
                  body: `{"_metadata": {"type": "SP.Publishing.SitePage"}, "CanvasContent1": ${JSON.stringify(canvas)}}`
                const restApi2 = `${context.absoluteUrl}/_api/sitepages/pages(${})/checkout`;
                const response1 = await, SPHttpClient.configurations.v1, {});
                const restApi = `${context.absoluteUrl}/_api/sitepages/pages(${})/SavePage`;
                const response = await, SPHttpClient.configurations.v1, sptOpts);

/savePage api error

{"error":{"code":"-1, System.Runtime.Serialization.SerializationException",  "message":"There was an error deserializing the object of type Microsoft.SharePoint.Publishing.SitePageFieldsData. End element 'CanvasContent1' from namespace '' expected. Found element 'item' from namespace ''."}}