Upgrade map widget library to support react 17

[somangshu]

map widget library react-google-maps doesn't seem to support react 17 its SearchBox widget that we use fails to render in react 17, the library last gave an update for react 16 for the same problem. its best if we ditch this library and use a new one its 5 years old and is not active.

Originally posted by @marks0351 in https://github.com/appsmithorg/appsmith/issues/16257#issuecomment-1236882805

[somangshu]

@keyurparalkar would you be able to take this up in the current sprint?

[yaldram]

https://www.npmjs.com/package/@react-google-maps/api

The above library is a fork of the original react-google-maps, which is very well maintained. I think we can use the above library.

[keyurparalkar]

For the map widget library upgrade, we think that once the react 17 changes are in place then from that we can continue towards the upgrade process. We are thinking this approach to be feasiblie since:

• Upgrading to to a library like this one is possible but the library itself is maintained by a single maintainer. This in near future will put our widget in risk to re-upgrade to a library that has a good support.

• We found that moving to all-together a different library seems to be a better solution here. A good candidate library would be like this one : https://github.com/google-map-react/google-map-react

• If we upgrade to the library mentioned in the point one then we would require double regression from QA standpoint. One regression for - When the widget goes live with the upgraded version without react 17 and Second with the react 17

CC: @somangshu @rohitagarwal88 @yaldram

[yaldram]

• We cannot update your React package because the map library we are currently using does not support React 17. So first we have to update our map library.
• You can choose any library that is compatible with the latest version of React and also supports React 17 and our current React 16 versions.

[yaldram]

My Rationale behind suggesting this - https://www.npmjs.com/package/@react-google-maps/api library is, it is a forked version of the library we are currently using, so the API will be same for the most part.

Also please check the Gtihub issues here - https://github.com/google-map-react/google-map-react/issues there are some issues with React 18 & node version 16.

Feel free to use whichever library is simple. Also check the issues page for both these libraries, I can see a lot of issues with React 18's StrictMode (dev mode), please check the issues.