Working on vendors favorite JSON form - issues with additional fields + rehydrating data

client/src/pages/landing/landing.page.jsx

@@ -1,13 +1,19 @@
 import React from "react";
-import { Typography } from "antd";
+import { Typography, Layout } from "antd";
 
 import HeaderContainer from "../../components/header/header.container";
 
 export default function LandingPage() {
+  const { Header, Content } = Layout;
   return (
-    <div>
-      <HeaderContainer landingHeader />
-      <Typography.Title>Welcome to bodyshop.app.</Typography.Title>
-    </div>
+    <Layout style={{ minHeight: "100vh" }}>
+      <Header>
+        <HeaderContainer landingHeader />
+      </Header>
+
+      <Content className="content-container" style={{ padding: "0em 4em 4em" }}>
+        <Typography.Title>Welcome to bodyshop.app.</Typography.Title>
+      </Content>
+    </Layout>
   );
 }

client/src/pages/shop-vendor/shop-vendor.page.component.jsx

@@ -7,7 +7,9 @@ export default function ShopVendorPageComponent({ selectedVendorState }) {
   return (
     <div>
       <VendorsListContainer selectedVendorState={selectedVendorState} />
-      <VendorsFormContainer vendor={selectedVendorState[0]} />
+      <VendorsFormContainer
+        vendorId={selectedVendorState[0] ? selectedVendorState[0].id : null}
+      />
     </div>
   );
 }