Moved picker provider in app.

src/App.tsx

@@ -12,6 +12,8 @@ import { Unauthorized } from 'components/Unauthorized/Unauthorized';
 import { LandingPage } from 'components/LandingPage/LandingPage';
 import { configureInterceptors } from 'api/axios/configureInterceptors';
 import { All } from 'roles/All';
+import DateFnsUtils from '@date-io/date-fns';
+import MuiPickersUtilsProvider from '@material-ui/pickers/MuiPickersUtilsProvider';
 
 /**
  * Entry point of the app.
@@ -23,15 +25,20 @@ export const App: FC = () => {
   return (
     <div data-testid="App">
       <ThemeProvider theme={appTheme}>
-        <Router>
-          <Switch>
-            <Route exact path={NonAuthRoutes.home} component={LandingPage} />
-            <Route path={NonAuthRoutes.auth} component={AuthUser} />
-            <Route path={AuthRoutes.dashboard} component={All(Dashboard)} />
-            <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
-            <Route component={NotFound} />
-          </Switch>
-        </Router>
+        <MuiPickersUtilsProvider utils={DateFnsUtils}>
+          <Router>
+            <Switch>
+              <Route exact path={NonAuthRoutes.home} component={LandingPage} />
+              <Route path={NonAuthRoutes.auth} component={AuthUser} />
+              <Route path={AuthRoutes.dashboard} component={All(Dashboard)} />
+              <Route
+                path={NonAuthRoutes.unauthorized}
+                component={Unauthorized}
+              />
+              <Route component={NotFound} />
+            </Switch>
+          </Router>
+        </MuiPickersUtilsProvider>
       </ThemeProvider>
     </div>
   );

src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx

@@ -9,13 +9,8 @@ import {
   Typography,
 } from '@material-ui/core';
 import { Control, Controller } from 'react-hook-form';
-import { InputField } from 'components/Auth/InputField/InputField';
 import { ReservationType } from 'types/ReservationType';
-import DateFnsUtils from '@date-io/date-fns';
-import {
-  MuiPickersUtilsProvider,
-  KeyboardDateTimePicker,
-} from '@material-ui/pickers';
+import { KeyboardDateTimePicker } from '@material-ui/pickers';
 import { reservationPageStyle } from '../ReservationPage.style';
 
 type TripStageProps = {
@@ -32,54 +27,52 @@ export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
   };
 
   return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <Card>
-        {stage.map((field, index) => (
-          <CardContent>
-            <Typography
-              variant="h6"
-              component="h3"
-              className={classes.paddingBottomKlein}
-            >
-              Stage {index}
-            </Typography>
-            <Controller
-              as={<input hidden />}
-              name={`tripStages[${index}].number`}
-              control={control}
-              defaultValue={index}
-            />
-            <Controller
-              as={<TextField variant="outlined" fullWidth label="Location" />}
-              name={`tripStages[${index}].location.address`}
-              control={control}
-              defaultValue={field}
-            />
-            <Controller
-              control={control}
-              name={`tripStages[${index}].estimatedBeAt`}
-              as={({ ref, ...rest }) => (
-                <KeyboardDateTimePicker
-                  margin="normal"
-                  id="date-picker-dialog"
-                  label="Date and Hour"
-                  defaultValue={field}
-                  format="dd/MM/yyyy"
-                  KeyboardButtonProps={{
-                    'aria-label': 'Insert trip stage',
-                  }}
-                  {...rest}
-                />
-              )}
-            />
-          </CardContent>
-        ))}
-        <CardActions>
-          <Button variant="outlined" onClick={addStage} type="button">
-            Add stage
-          </Button>
-        </CardActions>
-      </Card>
-    </MuiPickersUtilsProvider>
+    <Card>
+      {stage.map((field, index) => (
+        <CardContent>
+          <Typography
+            variant="h6"
+            component="h3"
+            className={classes.paddingBottomKlein}
+          >
+            Stage {index}
+          </Typography>
+          <Controller
+            as={<input hidden />}
+            name={`tripStages[${index}].number`}
+            control={control}
+            defaultValue={index}
+          />
+          <Controller
+            as={<TextField variant="outlined" fullWidth label="Location" />}
+            name={`tripStages[${index}].location.address`}
+            control={control}
+            defaultValue={field}
+          />
+          <Controller
+            control={control}
+            name={`tripStages[${index}].estimatedBeAt`}
+            as={({ ref, ...rest }) => (
+              <KeyboardDateTimePicker
+                margin="normal"
+                id="date-picker-dialog"
+                label="Date and Hour"
+                defaultValue={field}
+                format="dd/MM/yyyy"
+                KeyboardButtonProps={{
+                  'aria-label': 'Insert trip stage',
+                }}
+                {...rest}
+              />
+            )}
+          />
+        </CardContent>
+      ))}
+      <CardActions>
+        <Button variant="outlined" onClick={addStage} type="button">
+          Add stage
+        </Button>
+      </CardActions>
+    </Card>
   );
 };