title: Why is my JSX.Element not updating when the state is updated unless I wrap it in another JSX.Element?
body: <p>I am working on a typescript react project, both of which are new to me. I have the following model viewer and the type below it that consumes it. I deleted some of the bottom type so it is easier to read, but basically, getData gets called in useEffect. When the data is obtained, getData calls selectModule which, among other things, gets images from the data and sets shownImages. This all works as expected and shownImages is being set with the data expected. But when viewer 3d gets created, shownImages is not yet set. And it does not get recreated when shown images is set. However, if I replace <code>&lt;Viewer3D items={shownImages} /&gt;</code> with <code>&lt;Review3dComponent&gt;&lt;/Review3dComponent&gt;</code>, it does get recreated when shownImages is set. And I would like to know why Review3dComponent gets updated but Viewer3D does not.</p>
  <pre><code>interface Viewer3DProps {
      items: Image[] | Image;
  }
  
  const Viewer3D = ({ items }: Viewer3DProps) =&gt; {
      return (
          &lt;div className=&quot;threed-viewer&quot;&gt;
              &lt;OBJModel
                  items={items}
                  enableTransform={true}
                  position={{ x: 0, y: 0, z: 0 }}
                  texPath=&quot;&quot;
                  style={{ height: `100% !important`, width: `100% !important` }}
              /&gt;
          &lt;/div&gt;
      );
  };
  
  export default Viewer3D;
  
  export const File3dReview: NextPage = (): ReactElement =&gt; {
      {
          const [shownImages, setShownImages] = useState&lt;Image[]&gt;([]);
  
          const selectModule = (module: IModule) =&gt; {
              setCurrentModule(module);
              setCurrentGroups(module.group);
              const images: Image[] = module.group.flatMap(
                  (group) =&gt; group.images,
              ) as unknown as Image[];
              setShownImages(images);
              console.log(`set images`, images);
          };
  
          const getData = useCallback(async () =&gt; {
              //gets data and calls select module
          }, []);
  
          useEffect(() =&gt; {
              getData();
          }, [getData]);
  
          const Review3dComponent = () =&gt; {
              return (
                  &lt;div&gt;
                      &lt;Viewer3D items={shownImages} /&gt;
                  &lt;/div&gt;
              );
          };
  
          return (
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;header className=&quot;app-header&quot;&gt;
                          &lt;div className=&quot;app-navigation&quot;&gt;
                              &lt;Space size=&quot;middle&quot;&gt;
                                  &lt;div className=&quot;ic-24 color-secondary&quot;&gt;
                                      &lt;FiArrowLeft
                                          onClick={() =&gt; {
                                              router.back();
                                          }}
                                      /&gt;
                                  &lt;/div&gt;
                                  &lt;div&gt;{name}&lt;/div&gt;
                              &lt;/Space&gt;
                              &lt;nav&gt;
                                  &lt;Button shape=&quot;circle&quot; onClick={toggleDrawer}&gt;
                                      &lt;MenuOutlined /&gt;
                                  &lt;/Button&gt;
                              &lt;/nav&gt;
                          &lt;/div&gt;
                      &lt;/header&gt;
                  &lt;/div&gt;
                  &lt;Viewer3D items={shownImages} /&gt;
                  {/* &lt;Review3dComponent&gt;&lt;/Review3dComponent&gt; */}
                  &lt;DrawerComponent&gt;&lt;/DrawerComponent&gt;
              &lt;/div&gt;
          );
      }
  };
  
  export default File3dReview;
  </code></pre>