React-intl - How to use a default Locale - reactjs

Question

This could be a very easy question, however I've not been able to find the answer for it anywhere.
How do I use a default locale with react-intl? Specifying a default message every time gets really messy. The way that I'm doing it at the moment doesn't seem to pick up the default message when the browser uses a locale that doesn't have a translation.
How I'm using it at the moment:
import React from 'react'
import { Route } from 'react-router-dom'
import { IntlProvider } from 'react-intl'
import { Provider } from 'react-redux'
import { MuiThemeProvider, CssBaseline } from '#material-ui/core'
// import translations
import da_translations from './translations/da.json'
import de_translations from './translations/de.json'
import el_translations from './translations/el.json'
import en_translations from './translations/en.json'
import defaultTheme from './themes/default'
import {
QueryParamProvider,
ExtendedStringifyOptions,
transformSearchStringJsonSafe,
} from 'use-query-params'
import configureStore from './redux/configure-store'
import { Routes } from './routes'
const store = configureStore()
const App = (): JSX.Element => {
const state = { locale: navigator.language.slice(0, 2) }
const messages: { [index: string]: any } = {
da: da_translations,
de: de_translations,
el: el_translations,
en: en_translations,
}
const queryStringifyOptions: ExtendedStringifyOptions = {
transformSearchString: transformSearchStringJsonSafe,
}
return (
<Provider store={store}>
<IntlProvider
defaultLocale={'en'}
locale={state.locale}
messages={messages[state.locale]}
>
<QueryParamProvider
ReactRouterRoute={Route}
stringifyOptions={queryStringifyOptions}
>
<MuiThemeProvider theme={defaultTheme}>
<CssBaseline />
<Routes />
</MuiThemeProvider>
</QueryParamProvider>
</IntlProvider>
</Provider>
)
}
export default App
edit:
package.json
{
"name": "myproj",
"version": "0.8.47",
"description": "frontend",
"private": false,
"main": "dist/index.js",
"dependencies": {
"#babel/register": "^7.12.1",
"#date-io/date-fns": "^1.3.13",
"#google-cloud/translate": "^6.0.3",
"#material-ui/core": "^4.11.1",
"#material-ui/icons": "4.2.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#types/axios": "^0.14.0",
"#types/history": "^4.7.3",
"#types/jest": "^24.9.1",
"#types/lodash": "^4.14.158",
"#types/node": "^12.12.7",
"#types/react": "^16.9.11",
"#types/react-dom": "^16.9.4",
"#types/react-html-parser": "^2.0.1",
"#types/react-intl": "^3.0.0",
"#types/react-redux": "^7.1.9",
"#types/react-resizable": "^1.7.2",
"#types/react-router-dom": "^5.1.2",
"#types/reselect": "^2.2.0",
"#types/seamless-immutable": "^7.1.13",
"accept-language": "^3.0.18",
"ag-grid-community": "^23.1.1",
"ag-grid-react": "^23.1.1",
"axios": "^0.19.1",
"chai": "^4.2.0",
"chartist": "0.10.1",
"classnames": "^2.2.6",
"clsx": "^1.1.0",
"date-fns": "^2.9.0",
"flexsearch": "^0.6.32",
"fs-extra": "^9.0.1",
"history": "4.9.0",
"immutable": "^4.0.0-rc.12",
"js-yaml": "^3.14.0",
"lodash": "^4.17.19",
"log4js": "^6.3.0",
"loglevel": "^1.6.6",
"minimist": "^1.2.5",
"perfect-scrollbar": "1.4.0",
"prop-types": "15.7.2",
"qs": "^6.9.4",
"query-string": "^6.13.1",
"react": "^16.12.0",
"react-chartist": "0.13.3",
"react-dom": "^16.12.0",
"react-google-maps": "9.4.5",
"react-html-parser": "^2.0.2",
"react-intl": "^3.11.0",
"react-redux": "^7.2.1",
"react-resizable": "^1.10.1",
"react-router-dom": "^5.1.2",
"react-scripts": "4.0.0",
"react-swipeable-views": "0.13.3",
"redux": "^4.0.5",
"redux-observable": "^1.2.0",
"reselect": "^4.0.0",
"seamless-immutable": "^7.1.4",
"use-query-params": "^1.1.6"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env jest-environment-jsdom-sixteen --verbose",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"
},
"keywords": [],
"author": "tb",
"license": "MIT",
"homepage": "./",
"optionalDependencies": {
"#types/googlemaps": "3.37.3",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.10.2"
},
"devDependencies": {
"#testing-library/dom": "^7.24.2",
"#testing-library/jest-dom": "^5.11.1",
"#testing-library/react": "^10.4.7",
"#testing-library/user-event": "^12.1.4",
"#types/chai": "^4.2.13",
"#types/classnames": "^2.2.10",
"#types/enzyme": "^3.10.5",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/gulp": "^4.0.7",
"#types/jsdom": "^16.2.2",
"#typescript-eslint/eslint-plugin": "^4.7.0",
"#typescript-eslint/parser": "^4.7.0",
"axios-mock-adapter": "^1.18.2",
"cross-env": "^5.1.4",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-config-prettier": "6.0.0",
"eslint-plugin-prettier": "3.1.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"gulp": "^4.0.2",
"gulp-append-prepend": "1.0.8",
"gulp-filter": "^6.0.0",
"gulp-prettier": "^3.0.0",
"husky": "^4.3.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"jsdom": "^16.2.2",
"prettier": "^2.1.2",
"pretty-quick": "^3.1.0",
"react-intl-translations-manager": "^5.0.3",
"ts-node": "^9.0.0",
"typescript": "^3.9.7"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": []
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"jest": {
"transformIgnorePatterns": [
"node_modules/(?!(#ui5|lit-html)).*\\.js$"
]
}
}