Black Lives Matter. Please consider donating to Black Girls Code today.

Updating shape attributes in figure

I created a simple app with a Graph with an editable rectangle shape that the user can move around.
When checking the callback to read the values of the shape like x0 and x1 when a button is pressed (by simply printing the values) they stay the same even after moving around the rectangle in the app. 
Is there a way to get the current position of the shape after moving it in the app ?
Also another problem is that the text box does not seem to update with the new value.

def image_layout(id, image_path):
  encoded_image = base64.b64encode(open(image_path, 'rb').read())
  return dcc.Graph(
        id=id,
        figure={
            'data': [],
            'layout': {
                'xaxis': {
                    'range': RANGE,
                    'showline': False,
                    'showticklabels': False,
                },
                #'margin': 0,
                'yaxis': {
                    'range': RANGE,
                    'scaleanchor': 'x',
                    'scaleratio': 1,
                    'showline': False,
                    'showticklabels': False,
                },
                'height': img_height,
                'width': img_width,
                'images': [{
                    'xref': 'x',
                    'yref': 'y',
                    'x': RANGE[0],
                    'y': RANGE[1],
                    'sizex': RANGE[1] - RANGE[0],
                    'sizey': RANGE[1] - RANGE[0],
                    'sizing': 'fit',
                    'layer': 'above',
                    'source': 'data:image/png;base64,{}'.format(encoded_image.decode())
                }],
                  'shapes': [{
                    'type': 'rect',
                    'x0': 0.5,
                    'x1': 0.6,
                    'xref': 'paper',
                    'y0': 0.5,
                    'y1': 0.6,
                    'yref': 'y',

                    'line': {
                      'width': 4,
                      'color': 'rgb(255, 0, 0)',
                    }
                }]
            },
      },
    config={
    'editable': True,
    'edits': {
      'shapePosition': True,
      }
    }
)

app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'})

app.layout = html.Div([
    html.Div(className='row', children=[
        html.Div(image_layout('image', image_file), className='six columns')
    ]),
    html.Div(className='row', children=[html.Button('Blur', id='btn1')]),
    dcc.Input(id='text_for_test', value='initial value', type='text')
])


@app.callback(Output('text_for_test', 'value'),
              [Input('btn1', 'n_clicks'), Input('image', 'figure')])
def update_histogram(n1, fig):
    print(n1)
    print(str(fig['layout']['shapes'][0]['x0']))
    return str(fig['layout']['shapes'][0]['x0'])

if __name__ == '__main__':
    app.run_server(debug=True)