passing a ref api through form and update progress

components/elements/index.js

@@ -1,6 +1,10 @@
 import useSWR from "swr";
 import { Field, reduxForm } from "redux-form";
 import router from "next/router";
+import DatePicker from "react-datepicker";
+import React, { useState } from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import moment from "moment";
 
 export function Textfield(props) {
     const { name, label } = props;
@@ -51,6 +55,55 @@ export function MultiLinefield(props) {
     );
 }
 
+const RenderDatePicker = ({
+    datafieldname,
+    name,
+    label,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <DatePicker
+                {...custom}
+                autoOk={true}
+                dateFormat="dd/MM/yyyy"
+                onChange={onChange}
+                selected={value || null}
+
+                // value={!value ? null : new Date(value)}
+            />
+
+            {touched && error && <span>{error}</span>}
+        </>
+    );
+};
+
+export function DateFieldPicker(props) {
+    const { name, label } = props;
+    return (
+        <div className="govuk-form-group">
+            <fieldset
+                className="govuk-fieldset"
+                role="group"
+                aria-describedby="dob-hint"
+            >
+                <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                    <label className="govuk-fieldset__heading">
+                        {props.label}
+                    </label>
+                </legend>
+                <Field
+                    name={props.name}
+                    id={props.name}
+                    component={RenderDatePicker}
+                />
+            </fieldset>
+        </div>
+    );
+}
+
 export function DateField(props) {
     const { name, label } = props;