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(${context.spfxContex.pageContext.listItem.id})`;
            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);
                console.log(canvas);
                const sptOpts: ISPHttpClientOptions = {
                  body: `{"_metadata": {"type": "SP.Publishing.SitePage"}, "CanvasContent1": ${JSON.stringify(canvas)}}`
                }
        
                const restApi2 = `${context.absoluteUrl}/_api/sitepages/pages(${context.spfxContex.pageContext.listItem.id})/checkout`;
                const response1 = await context.spfxContex.spHttpClient.post(restApi2, SPHttpClient.configurations.v1, {});
        
                const restApi = `${context.absoluteUrl}/_api/sitepages/pages(${context.spfxContex.pageContext.listItem.id})/SavePage`;
                const response = await context.spfxContex.spHttpClient.post(restApi, SPHttpClient.configurations.v1, sptOpts);
                console.log(response);
              }
            }
          }

/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 ''."}}