Time Range Picker - Copy this React, Mui Component to your project

import-React,-{-useState-}-from-'react';-import-{-TextField,-Grid-}-from-'@mui/material';-import-{-AdapterDayjs-}-from-'@mui/x-date-pickers/AdapterDayjs';-import-{-LocalizationProvider-}-from-'@mui/x-date-pickers/LocalizationProvider';-import-{-TimePicker-}-from-'@mui/x-date-pickers/TimePicker';-import-dayjs-from-'dayjs';-const-TimeRangePicker-=-({-value,-onChange-})-=>-{-const-handleTimeChange-=-(position,-newValue)-=>-{-//-Ensure-newValue-is-always-a-valid-Day.js-object-const-dayjsValue-=-dayjs(newValue);-//-Convert-to-Day.js-object-if-(dayjsValue.isValid())-{-onChange(position,-dayjsValue);-//-Only-update-if-the-value-is-valid-}-else-{-console.error('Invalid-date-value:',-newValue);-}-};-return-(-<LocalizationProvider-dateAdapter={AdapterDayjs}>-<Grid-container-spacing={2}>-<Grid-item-xs={6}>-<TimePicker-label="Start-Time"-value={value.start}-//-Ensure-it's-a-Day.js-object-onChange={(newValue)-=>-handleTimeChange('start',-newValue)}-renderInput={(params)-=>-<TextField-{...params}-fullWidth-/>}-/>-</Grid>-<Grid-item-xs={6}>-<TimePicker-label="End-Time"-value={value.end}-//-Ensure-it's-a-Day.js-object-onChange={(newValue)-=>-handleTimeChange('end',-newValue)}-renderInput={(params)-=>-<TextField-{...params}-fullWidth-/>}-/>-</Grid>-</Grid>-</LocalizationProvider>-);-};-const-App-=-()-=>-{-const-[selectedTimeRange,-setSelectedTimeRange]-=-useState({-start:-dayjs('2024-12-18T09:00:00'),-end:-dayjs('2024-12-18T10:00:00'),-});-const-handleTimeRangeChange-=-(position,-newValue)-=>-{-//-Ensure-newValue-is-a-valid-Day.js-object-const-dayjsValue-=-dayjs(newValue);-//-Convert-to-Day.js-object-if-(dayjsValue.isValid())-{-setSelectedTimeRange((prevState)-=>-({-...prevState,-[position]:-dayjsValue,-//-Update-the-state-with-the-valid-Day.js-object-}));-}-else-{-console.error('Invalid-date-value:',-newValue);-}-};-return-(-<TimeRangePicker-value={selectedTimeRange}-onChange={handleTimeRangeChange}-/>-);-};-Quickly-Generate-MUI-Multi-Input-Time-Range-Field