Framework Maps- Interactive section do not align with pictures when personas are selected

Issue Summary

• Page: 
  Framework Maps
• Issue:
  The Interactive sections do not align with picture
• Condition:
  The issue occurs when personas are selected as part of at least one interactive section

Steps to Reproduce

1. Go to Framework Maps
2. Create a new Interactive Picture and start adding interactive section
3. Leave the "Persona" field empty
4. Notice the Highlighted section (toggled for clarity of the screenshot but do not impact the result) are placed in the right areas
   
5. Repeat the operation in another Interactive Picture or add new section to the existing one
6. Add a new section with Persona selected
   
7. go back and forth from a picture with persona and one without persona
8. Notice that the section are misplaced
   

Expected Results

The interactive section should always show accurately according to their position on the image

Actual Results

We noticed the following behaviour:

• Adding a new section actually highlights the error as well, where the section already created are misplaced.
• The behavior is that a user will select the Correct area for the new selection and dismiss the graphical error, then the selection will be showing back to the right position after the edit
• The switch back and forth from -no persona to -with persona highlights the order of the loading, that is:
  1. main frame
  2. Picture
  3. Persona slide in panel
  4. Resize of the picture to fit in the frame with the persona panel
• The issue occurs at step 4 where the resize occurs, but leave the section at their original position

Workaround

Refreshing the window or resizing the browser's window will force the picture to resize and the frames (section) to actively remap correctly