I am currently working on a React and Rails project where I am attempting to style my React components. However, I have encountered an issue with the MUI component Time and Date picker. Whenever I try to implement the time picker, I get a strange error regarding undefined properties.
EditReservationForm.js:106 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
The error is occurring on line 106. It seems that the problem lies in the inability to detect the value. Can someone please take a look at my code below?
import { useState } from "react";
import "./stylingfolder/EditReservation.css";
import Box from "@mui/material/Box";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import OutlinedInput from "@mui/material/OutlinedInput";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import { purple } from "@mui/material/colors";
import * as React from 'react';
...
... (rest of the code)
...
...
export default EditReservationForm;
``
It appears that when I use the normal form input for the time instead of the TimePicker component, everything works correctly. The error only occurs when using the TimePicker component. Is there another approach I could take to make this work? What could be causing this issue?