Formik MUI Localization Provider not working with Luxon Adapter for GB format

I am using MUI localisation provider with luxon adapter and trying to make the date into GB. However it is not working and remaining in the mm/dd/yyyy format when I want it to show as dd/mm/yyyy.
Please see image of front-end problem

This is my code for the form component. I have removed the other fields for simplicity.

import React, { useState, useEffect } from 'react';
import { Grid, TextField, Typography, FormControlLabel, Radio, RadioGroup, FormControl, FormLabel, Button, Autocomplete, Select } from '@mui/material';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { Settings, DateTime } from 'luxon';


// Set Luxon to use the UK locale globally
Settings.defaultLocale = 'en-GB';

const FormikMuiTextField = ({ formik, name, label, type = 'text', xs = 12, sm }) => {
    return (
      <Grid item xs={xs} sm={sm}>
        <TextField
          fullWidth
          variant="outlined"
          margin="normal"
          id={name}
          name={name}
          label={label}
          type={type}
          value={formik.values[name]}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched[name] && Boolean(formik.errors[name])}
          helperText={formik.touched[name] && formik.errors[name]}
          disabled={name === "totalPassengers"} // Disable the field for totalPassengers
          select={type === "select"}
          SelectProps={{ native: true }}
        >
          {type === "select" && ['Option1', 'Option2', 'Option3'].map(option => (
            <option key={option} value={option}>{option}</option>
          ))}
        </TextField>
      </Grid>
    );
  };


  return (
    
  <LocalizationProvider dateAdapter={AdapterLuxon}>


  <Grid item xs={6}>
  <DatePicker
    label="Departure Date"
    name="departureDate"

    value={formik.values.departureDate ? DateTime.fromISO(formik.values.departureDate) : null}
    onChange={(newValue) => {
      formik.setFieldValue('departureDate', newValue ? newValue.toISO() : '');
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        value={params.inputProps.value ? DateTime.fromISO(params.inputProps.value).toFormat('dd/MM/yyyy') : ''}
      />
    )}
    inputFormat="dd/MM/yyyy"

    fullWidth // Make the DatePicker full width
  />
</Grid>
</LocalizationProvider>
)

This is my package.json:

{
  "name": "umrah-quote-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^2.10.0",
    "@date-io/luxon": "^3.0.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.15",
    "@mui/x-date-pickers": "^7.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "cors": "^2.8.5",
    "date-fns": "^2.28.0",
    "express": "^4.19.2",
    "formik": "^2.4.5",
    "luxon": "^3.4.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-resizable": "^3.0.5",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "react-select": "^5.8.0",
    "web-vitals": "^2.1.4",
    "yup": "^1.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I have tried using different adapters, before I was using the date-fns adapter. But I am sure this is set up correctly. I tried using the localisation provider on just the date fields and it didn't work.

You are missing adapterLocale property in LocalizationProvider:

import React, { useState, useEffect } from 'react';
import { Grid, TextField, Typography, FormControlLabel, Radio, RadioGroup, FormControl, FormLabel, Button, Autocomplete, Select } from '@mui/material';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { Settings, DateTime } from 'luxon';


// Set Luxon to use the UK locale globally
Settings.defaultLocale = 'en-GB';

const FormikMuiTextField = ({ formik, name, label, type = 'text', xs = 12, sm }) => {
    return (
      <Grid item xs={xs} sm={sm}>
        <TextField
          fullWidth
          variant="outlined"
          margin="normal"
          id={name}
          name={name}
          label={label}
          type={type}
          value={formik.values[name]}
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched[name] && Boolean(formik.errors[name])}
          helperText={formik.touched[name] && formik.errors[name]}
          disabled={name === "totalPassengers"} // Disable the field for totalPassengers
          select={type === "select"}
          SelectProps={{ native: true }}
        >
          {type === "select" && ['Option1', 'Option2', 'Option3'].map(option => (
            <option key={option} value={option}>{option}</option>
          ))}
        </TextField>
      </Grid>
    );
  };


  return (
    
  <LocalizationProvider adapterLocale={'en-GB'} dateAdapter={AdapterLuxon}>

  <Grid item xs={6}>
  <DatePicker
    label="Departure Date"
    name="departureDate"

    value={formik.values.departureDate ? DateTime.fromISO(formik.values.departureDate) : null}
    onChange={(newValue) => {
      formik.setFieldValue('departureDate', newValue ? newValue.toISO() : '');
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        value={params.inputProps.value ? DateTime.fromISO(params.inputProps.value).toFormat('dd/MM/yyyy') : ''}
      />
    )}
    inputFormat="dd/MM/yyyy"

    fullWidth // Make the DatePicker full width
  />
</Grid>
</LocalizationProvider>
)

MUI has really good documentation. Usually, when I have a problem with MUI I look into documentation if component has some property which resolves my problem. I suggest to read an entire documentation of MUI (I know it's long, but worth it). It will help you to find a solution for your issues faster.