How to use the react-datepicker.setDefaultLocale function in react-datepicker

import { css } from 'glamor';
import { Label, InputError } from '../';
import { InputContainer, InputField } from '../Input';
import styled from '../../../';
import { Theme } from '../../../themes';

import sv from 'date-fns/locale/sv';
import nb from 'date-fns/locale/nb';
import fi from 'date-fns/locale/fi';
import 'react-datepicker/dist/react-datepicker.css';
import { withTheme } from 'emotion-theming';

registerLocale('sv', sv);
registerLocale('nb', nb);
registerLocale('fi', fi);
setDefaultLocale('sv');

const calendar =
    "'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22%23111%22 d=%22M13.504 1.463h-1.223V.502a.5.5 0 0 0-1 0v.961H4.742V.502a.5.5 0 0 0-1 0v.961H2.52c-.758 0-1.374.616-1.374 1.374v11.339a.5.5 0 0 0 .5.5h12.732a.5.5 0 0 0 .5-.5V2.837c0-.758-.616-1.374-1.374-1.374zm-10.984 1h10.984c.206 0 .374.168.374.374v1.857H2.146V2.837c0-.206.168-.374.374-.374zm-.374 11.213V5.694h11.732v7.982H2.146z%22/%3E%3Cpath fill=%22%23111%22 d=%22M12.117 8.904h-2.5a.5.5 0 0 0-.5.5v2.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5v-2.5a.5.5 0 0 0-.5-.5zm-.5 2.5h-1.5v-1.5h1.5v1.5z%22/%3E%3C/svg%3E'";

const inputErrorTransition = css({
    transition: 'height 150ms',
});

const InputFieldWithIcon = styled(InputField)<{ hasError: boolean }>({
    background: `url(${calendar}) no-repeat 95% center`,
    backgroundPosition: `calc(100% - 12px) 50%`, // doesn't work in IE11, that's why we need the 95% fallback above
    backgroundSize: '24px 24px', // a single value here doesn't work in IE11
});

const style = (theme: Theme) =>
    css({

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Datepicker, { registerLocale, setDefaultLocale } from "react-datepicker";
// eslint-disable-next-line import/no-duplicates
import { format } from "date-fns";
// eslint-disable-next-line import/no-duplicates
import fr from "date-fns/locale/fr";
import classNames from "classnames";

registerLocale('fr', fr);
setDefaultLocale('fr');

const CreateForm = () => {
  const [status, setStatus] = useState(false);
  const [dates, setDates] = useState({
    date: new Date(),
    time: new Date(),
    dateFormatted: '',
    timeFormatted: '',
    published_at: new Date(),
  });

  const className = classNames('absolute block w-4 h-4 mt-1 ml-1 rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out', {
    'bg-brand-primary transform translate-x-full': status,
    'bg-white': !status,
  });

import * as React from 'react';
import DatePicker, { registerLocale, setDefaultLocale, getDefaultLocale } from 'react-datepicker';
import enUS from 'date-fns/locale/en-US';

registerLocale('en-GB', { options: { weekStartsOn: 1 } });
setDefaultLocale('en-GB');
const defaultLocale = getDefaultLocale();

 <div>}
    className=""
    clearButtonTitle=""
    customInput={<input>}
    customInputRef=""
    dateFormat=""
    dateFormatCalendar=""</div>

},() => {
    moment.locale(languageToMomentLocale(i18n.language));
    setDefaultLocale(i18n.language);
  });