changed the component used in the bin and component settings to the grain selector and split out the form into another component that handles just the form and passing up a grainSettings object from its fields

src/navigation/Router.tsx

@@ -48,6 +48,7 @@ const JohnDeere = lazy(() => import("pages/JohnDeere"));
 const CNHi = lazy(() => import("pages/CNHi"));
 const LibraCart = lazy(() => import("pages/LibraCart"));
 const FieldPage = lazy(()=>import("pages/Field"));
+const GrainsPage = lazy(()=>import("pages/Grains"));
 
 export const appendToUrl = (appendage: number | string) => {
   const basePath = location.pathname.replace(/\/$/, ""); 
@@ -360,6 +361,7 @@ export default function Router() {
           {user.hasFeature("libra-cart") &&
           <Route path="libracart" element={<LibraCart />} />
           }
+          <Route path="grains" element={<GrainsPage />} />
           {/* Map routes */}
           <Route path="visualFarm" element={<FieldMap />} />
           <Route path="aviationMap" element={<AviationMap />} />