Как устранить ошибку сообщения формата FORMAT_ERROR, передавая значение в строковое сообщение

Question

В моем приложении React я должен добавить сообщение для окна подтверждения, которое выглядит следующим образом в моем файле message.js

confirmChangeMessage: {
    id: 'Candidate.confirmChangeMessage',
    defaultMessage: 'Change from {previous} to {newValue}',
  },

previous и newValue - это значения, которые я передаю в функцию для составления сообщения, как показано ниже

const onFieldChange = (e, fieldName) => {
    setOnFieldChangeConfirm(() => () => onChange(fieldName, e.target.value));
    setConfirmMsg(
      `${formatMessage(messages.confirmChangeMessage, {
        previous: candidate[fieldName],
        newValue: e.target.value,
      })}`,
    );
    setConfirmDialog(true);
  };

Но запустив это, я получаю следующую ошибку:

VM439 react_devtools_backend.js:2273 Error: [React Intl Error FORMAT_ERROR] Error formatting the default message for: "Candidate.confirmChangeMessage" 
Error: The intl string context variable "previous" was not provided to the string "Change from {previous} to {newValue}"

Я не знаю, как решить эту ситуацию, что мне не хватает. Должен ли я добавить для этого в этот файл специальную функцию или что-то еще?

Весь файл как ссылка

import React, { useState } from 'react';
import { MenuItem, Grid, FormControl } from '@material-ui/core';
import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { func, string, shape, arrayOf } from 'prop-types';
import messages from '../Candidate/Messages.js';
import SelectControl from '../HelperComponents/SelectControl';
import ConfirmDialog from '../Dialogs/ConfirmDialog';

const ContactHours = ({
  formatMessage,
  candidate,
  preferredContactWayVal,
  onChange,
  timezone,
  preferredContactHoursVal,
  formatTimeInterval,
  formatTime,
}) => {
  const { preferredContactHours, preferredContactWay } = candidate;

  const [confirmDialog, setConfirmDialog] = useState(false);
  const [confirmMsg, setConfirmMsg] = useState('');

  const [
    onFieldChangeConfirm,
    setOnFieldChangeConfirm,
  ] = useState(() => () => {});

  const theme = useTheme();
  const isLarge = useMediaQuery(theme.breakpoints.up('xl'));

  const onFieldChange = (e, fieldName) => {
    setOnFieldChangeConfirm(() => () => onChange(fieldName, e.target.value));
    setConfirmMsg(
      `${formatMessage(messages.confirmChangeMessage, {
        previous: candidate[fieldName],
        newValue: e.target.value,
      })}`,
    );
    setConfirmDialog(true);
  };
  // candidate[fieldName]
  // e.target.value
  // message={confirmMsg}

  return (
    <Grid container spacing={isLarge ? 2 : 0}>
      <Grid item xs={12} xl={8}>
        <FormControl margin="normal" fullWidth>
          <SelectControl
            value={preferredContactHours}
            label={formatMessage(messages.preferredContactHours)}
            placeholder={formatMessage(messages.preferredContactHours)}
            onChange={e => onFieldChange(e, 'preferredContactHours')}
          >
            {preferredContactHoursVal.map(slot => (
              <MenuItem key={Number(slot.id)} value={slot.value}>
                {formatTimeInterval(slot.value, formatTime)} {timezone}
              </MenuItem>
            ))}
          </SelectControl>
        </FormControl>
      </Grid>
      <Grid item xs={12} xl={4}>
        <FormControl margin="normal" fullWidth>
          <SelectControl
            value={preferredContactWay || 'Phone call'}
            label={formatMessage(messages.preferredContactWay)}
            placeholder={formatMessage(messages.preferredContactWay)}
            onChange={e => onFieldChange(e, 'preferredContactWay')}
          >
            {preferredContactWayVal.map(slot => (
              <MenuItem key={Number(slot.id)} value={slot.value}>
                {slot.value}
              </MenuItem>
            ))}
          </SelectControl>
        </FormControl>
      </Grid>
      {confirmDialog && (
        <ConfirmDialog
          open={confirmDialog}
          closeDialog={() => setConfirmDialog(false)}
          title={formatMessage(messages.confirmChangeTitle)}
          message={confirmMsg}
          handleClick={confirmed => {
            if (confirmed) {
              onFieldChangeConfirm();
            }
          }}
        />
      )}
    </Grid>
  );
};

ContactHours.propTypes = {
  formatMessage: func.isRequired,
  candidate: shape({
    preferredContactHours: string,
  }),
  preferredContactHoursVal: arrayOf(
    shape({
      id: string,
      value: string,
    }),
  ),
  preferredContactWayVal: arrayOf(
    shape({
      id: string,
      value: string,
    }),
  ),
  preferredContactWay: string,
  onChange: func,
  formatTimeInterval: func,
  formatTime: func,
  timezone: string,
};

ContactHours.defaultProps = {
  preferredContactWay: '',
  candidate: {},
  onChange: () => {},
  formatTimeInterval: () => {},
  formatTime: () => {},
  timezone: '',
  preferredContactHoursVal: [],
  preferredContactWayVal: [],
};

export default ContactHours;