Ticker only display when I resize the browser

[premtemp1]

Hello,
Thanks for ticker but It only works when I manually resize the window.. Can you please let me know how to fix it

const WeatherWidget = ({ id, editMode }) => {
 const [initialized, setInitialized] = useState(false);
 const [settings, setSettings] = useState({});
 const [widgetApi, setWidgetApi] = useState();
 const [tickerTitle, setTickerTitle] = useState();
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState();
 const [roles, setRoles] = useState([]);

 const settingsChanged = useCallback(debounce(setSettings, 1000), []);

 useEffect(() => {
   const **setDataRole** = (json) => {
     setRoles(json.data)
   }
   if (widgetApi && initialized && settings.jsonData) {
     var json = validateJSON(settings.jsonData);
     **setDataRole**(json);
   }
 }, [settings])


 return (
   <Container>

     <StyledUl>
       <Ticker>

         {({ index }) => (
           <>
             {roles && roles.map(({ key, value }, i) => (
               <>
                 {i === 0 ? null : ','}

                 <span className="name" style={{ fontSize: "12px", color: settings?.keyColor, whiteSpace: "nowrap", margin: "5px" }}>
                   {key}
                 </span>
                 <span className="goal" style={{ fontSize: "12px", color: settings?.valueColor, whiteSpace: "nowrap", margin: "5px" }}>{value}</span>

               </>
             ))
             }
           </>
         )}
       </Ticker>
     </StyledUl>
   </Container>
 );
};

[scottie]

Same issue here can confirm !