attempting to pass in height referencing the parent size component of visx and how component map is rendering/passing in values

Author: ay7991

src/app/components/StateRoute/StateRoute.tsx

@@ -102,12 +102,26 @@ const StateRoute = (props: StateRouteProps) => {
           <Route
             path='/accessibility'
             element={
-              <AxTree
-                axSnapshots={axSnapshots}
-                snapshot={snapshot}
-                snapshots={snapshots}
-                currLocation={currLocation}
-              />
+              hierarchy ? (
+                <ParentSize className='componentMapContainer'>
+                  {({ width, height }) => {
+                    // eslint-disable-next-line react/prop-types
+                    const maxHeight: number = 1200;
+                    const h = Math.min(height, maxHeight);
+                    console.log('h: ', h);
+                    return (
+                      <AxTree
+                        axSnapshots={axSnapshots}
+                        snapshot={snapshot}
+                        snapshots={snapshots}
+                        currLocation={currLocation}
+                        width={width}
+                        height={h}
+                      />
+                    );
+                  }}
+                </ParentSize>
+              ) : null
             }
           ></Route>
           <Route
@@ -173,6 +187,7 @@ const StateRoute = (props: StateRouteProps) => {
                     // eslint-disable-next-line react/prop-types
                     const maxHeight: number = 1200;
                     const h = Math.min(height, maxHeight);
+                    console.log('h component map: ', h);
                     return (
                       <ComponentMap
                         currentSnapshot={currLocation.stateSnapshot}