React js showing different date then passed from api

Question

I am passing a plain date as string from api, something like 2022-04-24, but on front react, it is parsing the date to the local timezone, which I don't want to be parsed to local timezone. My code on react looks like:

import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export function App() {
  const schema = Yup.object({});

  const {
    register,
    handleSubmit,
    formState: { errors },
    control
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = async (input) => {
    console.log("input", input);
  };

  const item = {
    id: 12,
    release_date: "2022-04-24"
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="release_date"
        defaultValue={item.release_date ? new Date(item.release_date) : null}
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange}
            onBlur={onBlur}
            className="form-control w-full"
            dateFormat="MMM dd, yyyy"
            selected={value}
          />
        )}
      />

      <input type="submit" />
    </form>
  );
}

Here is the screenshot,

Currently, it is showing apr 23, even when I had passed it 04-24. To see the issue, you might have to use some different timezone (where still current date is apr 23).

And, here is the sandbox

Answer 1

There is a different when you use - and /

const date1 = new Date("2022/04/24");
const date2 = new Date("2022-04-24");

document.getElementById("app").innerHTML = `
<h4>${date1}</h4>
<h4>${date2}</h4>
`;

<div id="app">
</div>

https://codesandbox.io/s/date-object-qqjnrs