I'm trying to add an iframe to the right hand side of my webpage, but for some reason the iframe won't load when I refresh the page. I tried looking at my developer tools in Google but all I saw was that there was a style property added to my iframe that says, "display: none !important". I don't know if this is what is keeping it from loading, but that is all I can think of. I looked at other suggestions, but they didn't fix the problem.

I also don't know how to get rid of the display property if it is the issue. I don't have any compiling issues. I'm creating this website with React and I'm trying to display my facebook account with an iframe on the right hand side of my webpage. I could really use some help with this. Here is my React code:

import React from 'react';
import "./Widgets.css";

function Widgets() {
  return (
    <div className="widgets">
      <iframe 
        title="widgets"
        src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100009419984981&tabs=timeline&width=340&height=1500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" 
        width="340" 
        height="1500" 
        scrolling="no" 
        frameborder="0" 
        allowfullscreen="true" 
        style= {{ border: "none", overflow: "hidden" }}
        allow="encrypted-media">
      </iframe>
    </div>
  )
}

export default Widgets;

Screenshot of styles affecting the iframe: