Calendar start-date value takes a day before selected value, when selecting the start date

[akashbhad]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-Calendar version
• [X] I have checked if this bug is not already reported

Description

I'm using the calendar in my react component, when I'm selecting a date range from 1st of Feb 2023 to Feb 10th 2024. when I'm accessing the values of the value which stores the date range it shows 31st of Jan to Feb 10th 2024.

Here the end date value is not getting effected, but only the start date value is taking a previous date.

Steps to reproduce

import DateRangePicker from '@wojtekmaj/react-daterange-picker';
import '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';
import 'react-calendar/dist/Calendar.css';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import { Box } from '@material-ui/core';
import PropTypes from 'prop-types';

export default function Calendar({ value, onChange }) {
    return (
        <Box>
            <DateRangePicker
                onChange={onChange}
                value={value}
                isOpen={true}
                rangeDivider={<ArrowRightAltIcon />}
                clearIcon={null}
            />
        </Box>
    );
}
Calendar.propTypes = {
    value: PropTypes.array,
    onChange: PropTypes.func,
};

Let's say this is the Calendar component which I have created as a separate component. I'm passing the value and onChange via the props to the Calendar component.

The below code just shows an illustration of how it is being used

 <Box className="custom_range_selector_modal">
                <Modal
                    open={open}
                    onClose={handleCloseRangeModal}
                    aria-labelledby="modal-modal-title"
                    aria-describedby="modal-modal-description"
                >
                    <Box sx={style}>
                        <Box className="calendar_wrapper_box">
                            <Calendar value={value} onChange={onChange} />
                        </Box>
                        <div className="calendar_btn-box">
                            <Button
                                className="calendar_cancel-btn"
                                onClick={() => {
                                    handleCloseRangeModal();
                                }}
                            >
                                Cancel
                            </Button>
                            <Button
                                className="apply-btn"
                                onClick={() => {
                                    getData();
                                    handleCloseRangeModal();
                                }}
                            >
                                Apply
                            </Button>
                        </div>
                    </Box>
                </Modal>
            </Box>

And the states are mentioned in the parent component in this manner const [value, onChange] = useState([new Date(), new Date()]);

Expected behavior

Expected behaviour was to select the original selected date which was selected for the start_date

Actual behavior

Here the start_date is selecting the date of a previous day

Additional information

No response

Environment

• Browser (if applicable):
• React-Calendar version:
• React version: Browser - Chrome / Firefox

dependencies - "dependencies": { "@wojtekmaj/date-utils": "^1.1.3", "clsx": "^2.0.0", "get-user-locale": "^2.2.1", "make-event-props": "^1.6.0", "prop-types": "^15.6.0", "react-calendar": "^4.6.0", "react-fit": "^1.7.0", "update-input-width": "^1.4.0" },

[akashbhad]

I have opened this issue in the wrong place please close and delete this. I'm not able to delete this

[akashbhad]

Closing the issue