fix: guides page images rendering issue

[Chakravarthy7102]

Summary of change

Using normal JS variables in the place react state to store the icons paths.

Cause for the issue.

The reason why the flicker was happening in the first place is that the src url for the image tag is provided on the client side some time after rendering the html.

Why this behaviour?

So last week we have fixed missing/duplicate alt attribute to images so that's when this bug got introduced. Since before that there were no alt tags this behaviour never observed.

Previous build guides.html output

after fix

Related issues

• Link to issue1 here
• Link to issue1 here

Checklist

• [ ] Algolia search needs to be updated? (If there is a new sub docs project, then yes)
• [ ] Sitemap needs to be updated? (If there is a new sub docs project, then yes)
• [ ] Checked for broken links? (Run cd v2 && MODE=production npx docusaurus build)
• [ ] Changes required to the demo apps corresponding to the docs?

Remaining TODOs for this PR

• [ ] Item1
• [ ] Item2

[netlify[bot]]

✅ Deploy Preview for admiring-bhabha-7b1be9 ready!

Name	Link
🔨 Latest commit	4a7cea29698fc7bb3edb35328b5fda6c0090436d
🔍 Latest deploy log	https://app.netlify.com/sites/admiring-bhabha-7b1be9/deploys/659bf064953f4e0008630eb0
😎 Deploy Preview	https://deploy-preview-771--admiring-bhabha-7b1be9.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.