React js reform DateTime values in array back to momentjs objects

You can simply set the properties as moment objects. Parse correctly as utc using: moment.utc() moment.utc('2020-06-12T09:22:00.316Z'); and simply set the properties.

You can then process using moment methods and properties.

Render calling the relevant format you need.

Simple demo:

// parse as UTC correctly 
const start = moment.utc('2020-06-12T09:22:00.316Z');
const end = start.clone().add(1, 'd');

const appointmentToRender = [{
  start: start,
  end: end,
  __typename: 'Appointment'
}];

const item = appointmentToRender[0];

// calcute using the moment objects
const diff = end.diff(start, 'h');
console.info(`${diff} hours difference`);

// format etc
console.info(item.end.format('ddd, Mo MMM YYYY, HH:mm'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment-with-locales.min.js"></script>

React:

import React, {useState} from "react";
import moment from 'moment';

export default function App() {
  const [data,] = useState(() => {
    // parse as UTC correctly 
    const start = moment.utc('2020-06-12T09:22:00.316Z');
    const end = start.clone().add(1, 'd');

    const appointmentToRender = [{
      start: start,
      end: end,
      __typename: 'Appointment'
    }];

    return appointmentToRender;
  });

  return (
    <div className="App">
      {data && data.map((item, index) => (
        <div key={index}>
          {item.end.format('ddd, Mo MMM YYYY, HH:mm')} ({item.end.diff(item.start, 'h')} hours long)
        </div>
      ))}
    </div>
  );
}