Cannot get React testing Jest-DOM to select a date from a date picker or time from a time picker

Question

I cannot, for the life of me, figure out how to get Jest-dom in react testing to select a date picker and the same for the time picker. All my other fields are being done correctly but not these. I tried editing the elements but because they are from MaterialUI I had to pass the data-testid through as props which gave access to updating the elements but still is not working for where the input fields have type:date or type:time. I am very new to testing react (this is my first react project). How am I able to access those fields to edit?

The output is below:

{
      name: 'P. Sherman',
      contactNumber: '98764321265',
      checkInDate: '',
      checkOutDate: '',
      checkInTime: '',
      checkOutTime: '',
      bookingReference: 'Booking Reference',
      buildingNumber: '42',
      buildingName: '',
      addressLine1: 'Wallaby Way',
      addressLine2: '',
      city: 'Sydney',
      postalCode: '2000',
      stateCounty: 'NSW',
      countryCode: ''
    }

The Jest tests:

  const name = "P. Sherman";
  fireEvent.change(screen.getByTestId("name"), {
    target: { value: name },
  });

  const contactNumber = 98764321265;
  fireEvent.change(screen.getByTestId("contactNumber"), {
    target: { value: contactNumber },
  });

  const checkInDate = "01/01/2023";
  fireEvent.change(screen.getByTestId("checkInDateInput"), {
    target: { value: checkInDate },
  });

  const checkOutDate = "02/01/2023";
  fireEvent.change(screen.getByTestId("checkOutDateInput"), {
    target: { value: checkOutDate },
  });

  const checkInTime = "17:00";
  fireEvent.change(screen.getByTestId("checkOutDateInput"), {
    target: { value: checkInTime },
  });

  const checkOutTime = "11:00";
  fireEvent.change(screen.getByTestId("checkOutDateInput"), {
    target: { value: checkOutTime },
  });

  const bookingReference = "Booking Reference";
  fireEvent.change(screen.getByTestId("bookingReference"), {
    target: { value: bookingReference },
  });

  const buildingNumber = "42";
  fireEvent.change(screen.getByTestId("buildingNumber"), {
    target: { value: buildingNumber },
  });

  const addressLine1 = "Wallaby Way";
  fireEvent.change(screen.getByTestId("addressLine1"), {
    target: { value: addressLine1 },
  });

  const city = "Sydney";
  fireEvent.change(screen.getByTestId("city"), {
    target: { value: city },
  });

  const postalCode = "2000";
  fireEvent.change(screen.getByTestId("postalCode"), {
    target: { value: postalCode },
  });

  const stateCounty = "NSW";
  fireEvent.change(screen.getByTestId("stateCounty"), {
    target: { value: stateCounty },
  });

  fireEvent.click(screen.getByTestId("saveAccommodationDetails"));

  expect(
    screen.getByText("Address: 42, Wallaby Way, Sydney, NSW, 2000")
  ).toBeInTheDocument();

The return for the function component:

return (
    <div>
      <Fab size="large" color="secondary" aria-label="add" onClick={handleOpen}>
        <AddIcon />
      </Fab>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Accommodation</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Add Accommodation. Fill in the fields to store your Accommodation
            details
          </DialogContentText>
          <TextField
            value={accommodation.name}
            autoFocus
            margin="dense"
            id="name"
            name="name"
            label="Accommodation Name"
            type="text"
            variant="outlined"
            required
            onChange={handleChange}
          />
          <TextField
            value={accommodation.contactNumber}
            inputProps={{ "data-testid": "contactNumber" }}
            autoFocus
            margin="dense"
            id="contactNumber"
            name="contactNumber"
            label="Accommodation Contact Number"
            type="number"
            variant="outlined"
            required
            onChange={handleChange}
          />
          <TextField
            value={accommodation.checkInDate}
            data-testid="checkInDate"
            inputProps={{ "data-testid": "checkInDateInput" }}
            autoFocus
            margin="dense"
            id="checkInDate"
            name="checkInDate"
            label="Date of Arrival"
            type="date"
            variant="outlined"
            required
            InputLabelProps={{
              shrink: true,
            }}
            onChange={handleChange}
          />
          <TextField
            value={accommodation.checkOutDate}
            inputProps={{ "data-testid": "checkOutDateInput" }}
            data-testid="checkOutDate"
            autoFocus
            margin="dense"
            id="checkOutDate"
            name="checkOutDate"
            label="Date of Departure"
            type="date"
            variant="outlined"
            required
            InputLabelProps={{
              shrink: true,
            }}
            onChange={handleChange}
          />
          <TextField
            value={accommodation.checkInTime}
            inputProps={{ "data-testid": "checkInTimeInput" }}
            data-testid="checkInTime"
            autoFocus
            margin="dense"
            id="checkInTime"
            name="checkInTime"
            label="Time of Arrival"
            type="time"
            variant="outlined"
            required
            InputLabelProps={{
              shrink: true,
            }}
            onChange={handleChange}
          />
          <TextField
            value={accommodation.checkOutTime}
            inputProps={{ "data-testid": "checkOutTimeInput" }}
            data-testid="checkOutTime"
            autoFocus
            margin="dense"
            id="checkOutTime"
            name="checkOutTime"
            label="Time of Departure"
            type="time"
            variant="outlined"
            required
            InputLabelProps={{
              shrink: true,
            }}
            onChange={handleChange}
          />
          <TextField
            value={accommodation.bookingReference}
            inputProps={{ "data-testid": "bookingReference" }}
            autoFocus
            margin="dense"
            id="bookingReference"
            name="bookingReference"
            label="Booking Reference"
            type="text"
            variant="outlined"
            required
            onChange={handleChange}
          />
          <TextField
            value={accommodation.buildingNumber}
            inputProps={{ "data-testid": "buildingNumber" }}
            autoFocus
            margin="dense"
            id="buildingNumber"
            name="buildingNumber"
            label="Building Number"
            type="text"
            variant="outlined"
            onChange={handleChange}
          />
          <TextField
            value={accommodation.buildingName}
            inputProps={{ "data-testid": "buildingName" }}
            autoFocus
            margin="dense"
            id="buildingName"
            name="buildingName"
            label="Building Name"
            type="text"
            variant="outlined"
            onChange={handleChange}
          />
          <TextField
            value={accommodation.addressLine1}
            inputProps={{ "data-testid": "addressLine1" }}
            autoFocus
            margin="dense"
            id="addressLine1"
            name="addressLine1"
            label="Address Line 1"
            type="text"
            variant="outlined"
            required
            onChange={handleChange}
          />
          <TextField
            value={accommodation.addressLine2}
            inputProps={{ "data-testid": "addressLine2" }}
            autoFocus
            margin="dense"
            id="addressLine2"
            name="addressLine2"
            label="Address Line 2"
            type="text"
            variant="outlined"
            onChange={handleChange}
          />
          <TextField
            value={accommodation.city}
            inputProps={{ "data-testid": "city" }}
            autoFocus
            margin="dense"
            id="city"
            name="city"
            label="City"
            type="text"
            variant="outlined"
            required
            onChange={handleChange}
          />
          <TextField
            value={accommodation.stateCounty}
            inputProps={{ "data-testid": "stateCounty" }}
            autoFocus
            margin="dense"
            id="stateCounty"
            name="stateCounty"
            label="State/Province"
            type="text"
            variant="outlined"
            onChange={handleChange}
          />
          <TextField
            value={accommodation.postalCode}
            inputProps={{ "data-testid": "postalCode" }}
            autoFocus
            margin="dense"
            id="postalCode"
            name="postalCode"
            label="Postal/Zip Code"
            type="text"
            variant="outlined"
            required
            onChange={handleChange}
          />
          <TextField
            value={accommodation.countryCode}
            inputProps={{ "data-testid": "countryCode" }}
            autoFocus
            margin="dense"
            id="countryCode"
            name="countryCode"
            label="Country"
            type="text"
            variant="outlined"
            onChange={handleChange}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleSubmit} data-testid="saveAccommodationDetails">
            Save Accommodation Details
          </Button>
          <Button onClick={handleClose}>Cancel</Button>
        </DialogActions>
      </Dialog>
    </div>
  );