Refactor the FullScreenIcon component to use conditional rendering instead of direct DOM manipulation for better alignment with React best practices.

- const FullScreenIcon = ({ exit }: { exit: boolean }) => {
-   const ref = useRef<HTMLDivElement>();
- 
-   useEffect(() => {
-     if (ref) {
-       ref.current.innerHTML = "";
-       ref.current.appendChild(exit ? fullscreenExit : fullscreen);
-     }
-   }, [exit]);
- 
-   return <div style={{ display: "flex" }} ref={ref} />;
- };
+ const FullScreenIcon = ({ exit }: { exit: boolean }) => (
+   <div style={{ display: "flex" }}>
+     {exit ? fullscreenExit : fullscreen}
+   </div>
+ );

This change eliminates the need for useRef and useEffect for DOM manipulation, leveraging React's declarative nature for UI updates.

this doesn't work

@sashankaryal, it seems there was an issue locating the icons.ts file or extracting the implementation details of the fullscreen and fullscreenExit icons using the provided script. This could be due to a variety of reasons, such as the file not existing where expected or the icons being imported from an external library that isn't directly accessible in this manner.

Given this, I'd like to suggest a couple of alternative approaches to address the original concern with the FullScreenIcon component:

1. Verify Icon Import Method: Ensure that the fullscreen and fullscreenExit icons are imported correctly and can be rendered directly in JSX. If these icons are SVGs or React components, they should be able to be included directly within the JSX return statement without needing to manipulate the DOM.

2. Alternative Rendering Strategy: If the icons are not directly renderable in JSX (for example, if they are SVG elements stored as strings or files), consider using a method to safely convert them into a format that can be rendered. This could involve using a library or utility function designed for this purpose.

3. Revisit Original Implementation: If direct DOM manipulation is indeed necessary due to the specific requirements or limitations of how these icons are implemented, it may be worth revisiting the original implementation. In such cases, ensuring that the manipulation is done as safely and efficiently as possible within the React component lifecycle is important.

Without direct access to the implementation details of the icons, these suggestions are based on common practices and potential scenarios. If you have more information about how these icons are implemented or if there's a specific error or issue encountered with the suggested refactor, please let me know, and I can provide further assistance.

#!/bin/bash
# Inspect the implementation of the fullscreen and fullscreenExit icons.
fd "icons.ts" app/packages/looker/src --exec cat {}