Cloudinary Widget is populating twice in my app

Question

I'm using Cloudinary as an image hosting DB for my application. I'm trying to call the widget, whenever I toggle the submit for my ORM function. The call is working, but it is producing two widgets on top of one another.

ORM Modal:

const OneRepMaxModal = (props) => {
    const [orm, setOrm] = useState({
        benchPressMax: 0,
        squatMax: 0,
        overHeadPressMax: 0,
        deadliftMax: 0,
    })
    const history = useHistory();
    const [widgetModal, setWidgetModal] = useState(false)

    const ormChangeHandler = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        const tempOrm = { ...orm };
        tempOrm[name] = value;
        setOrm(tempOrm);
    
      }
      const widgetToggle = () => {
        setWidgetModal(widgetModal ? false : true);
      }
    
      const ormSubmitHandler = () => {
          console.log(orm + ' orm con log ')
        axios.post(`http://localhost:8080/specificPlanORM/${props.planID}`, orm, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(() => {
            console.log('toggle')
            widgetToggle();
           
        })
      }
      function widgetDisplay() {
            console.log('display')
        if (widgetModal) {
          return (
            <CloudinaryUploadWidget planID={props.planID} />
            
          )
          }
      }

    return (
        <div className='page-overlay'>
            <div className='modal-table'>
                <button className='close-button' onClick={props.onClick}> X
                </button>
                <form className='modal-form-container'>
                    <div className="flexbox-item modal-form">
                        <label className='h1-underline' >BenchPress max</label>
                        <input name="benchPressMax" value={orm.benchPressMax} onChange={ormChangeHandler} type="number" className="form-control" />
                    </div>
                    <div className="flexbox-item modal-form">
                        <label >Squat max</label>
                        <input name="squatMax" value={orm.squatMax} onChange={ormChangeHandler} type="number" className="form-control" />
                    </div>
                    <div className="flexbox-item modal-form">
                        <label >deadlift max</label>
                        <input name="deadliftMax" value={orm.deadliftMax} onChange={ormChangeHandler} type="number" className="form-control" />
                    </div>
                    <div className="flexbox-item modal-form">
                        <label >Overhead Press max</label>
                        <input name="overHeadPressMax" value={orm.overHeadPressMax} onChange={ormChangeHandler} type="number" className="form-control" />
                    </div>
                    <button onClick={ormSubmitHandler} type='button'>Submit</button>
                </form>
                {widgetDisplay()}
            </div>
        </div>

    )
}

Cloudinary Widget:

const CloudinaryUploadWidget = (props) => {
    const history = useHistory();

    const [plan, setPlan] = useState({
        image: ''
    })

    useEffect(() => {
      axios.get(`http://localhost:8080/findSpecificPlan/${props.planID}`, {
        headers: {
          'Content-Type': 'application/json'
        }
  
      }).then((response) => {
        setPlan(response.data);
        console.log(response.data)
      }).catch((error) => {
        console.log('error in getting plan')
  
      });
  
    }, []);
  

    function showUploadWidget() {
        window.cloudinary.openUploadWidget({
           cloudName: "<CloudName>",
           uploadPreset: "<UploadPreset>",
           sources: [
               "local",
               "camera",
               "instagram",
               "facebook"
           ],
           googleApiKey: "<image_search_google_api_key>",
           showAdvancedOptions: true,
           cropping: true,
           multiple: false,
           defaultSource: "local",
           styles: {
               palette: {
                   window: "#464040",
                   sourceBg: "#292222",
                   windowBorder: "#c7a49f",
                   tabIcon: "#cc6600",
                   inactiveTabIcon: "#E8D5BB",
                   menuIcons: "#ebe5db",
                   link: "#ffb107",
                   action: "#ffcc00",
                   inProgress: "#99cccc",
                   complete: "#78b3b4",
                   error: "#ff6666",
                   textDark: "#4C2F1A",
                   textLight: "#D8CFCF"
               },
               fonts: {
                   default: null,
                   "'Merriweather', serif": {
                       url: "https://fonts.googleapis.com/css?family=Merriweather",
                       active: true
                   }
               }
           }
       },
        (err, info) => {
          if (!err) {    
            console.log("Upload Widget event - ", info);
          } 
         } 
         );
        }

    return (
        <div>{showUploadWidget()}</div>
    );
}

export default CloudinaryUploadWidget

The function is working and passing my everything properly. All my conlog's print accordingly once (except the cloudinary con logs).

Console Logs:

OneRepMaxModal.js:41 Display (First call when display is false )

OneRepMaxModal.js:29 [object Object] orm con log 

OneRepMaxModal.js:35 Toggle

OneRepMaxModal.js:41 Display (Second call when state is change to true)

CloudinaryUploadWidget.js:22 {id: 128, name: 'Five Three One', planStart: '2022-05-06', planEnd: null, ormId: {…}}

CloudinaryUploadWidget.js:73 Upload Widget event -  {info: {…}, event: 'source-changed', uw_event: true, data: {…}}

CloudinaryUploadWidget.js:73 Upload Widget event -  {info: {…}, event: 'source-changed', uw_event: true, data: {…}}

CloudinaryUploadWidget.js:73 Upload Widget event -  {info: 'shown', event: 'display-changed', uw_event: true, data: {…}}

CloudinaryUploadWidget.js:73 Upload Widget event -  {info: 'shown', event: 'display-changed', uw_event: true, data: {…}}

Answer 1

Got rid of the useEffect and that solved the issue.