How do I restructure React-Leaflet from javascript using a EPSG:27700 Ordnance Survey map?

Question

Would appreciate some help in understanding and restructuring a working javascript leaflet map into react-leaflet. I have a working javascript leaflet script that shows an OS EPSG:27700 map using the Proj4 coordinate transformation. But, I would like to use a react-leaflet in order to do the same. I am unsure how to use the proj4 code within react to transform the EPSG:27700 map tiles.

Working javascript leaflet (I have removed my apikey for obvious reasons)...

index.js `

// OS MAPS API KEY const apiKey = 'MY API KEY';
// Setup the EPSG:27700 (British National Grid) projection.
const crs = new L.Proj.CRS('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs', {
  resolutions: [896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75],
  origin: [-238375.0, 1376256.0]
});

// Transform coordinates.
const transformCoords = function (arr) {
  return proj4('EPSG:27700', 'EPSG:4326', arr).reverse();
};

// Initialize the map.
const mapOptions = {
  crs: crs,
  minZoom: 0,
  maxZoom: 9,
  //center: transformCoords([413309.077404, 139055.353033]),
  zoom: 9,
  maxBounds: [
    transformCoords([-238375.0, 0.0]),
    transformCoords([900000.0, 1376256.0])
  ],
  attributionControl: false
};

// generate the MAP
const map = L.map('map', mapOptions);

// Load and display ZXY tile layer on the map.
const basemap = L.tileLayer('https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=' + apiKey).addTo(map);

// Setting the Map to centre 
map.setView([51.178839, -1.82593], 8);

// Driving instructions 
L.Routing.control({
  show: false, // hide the itinerary list
  createMarker: function () { return null; },  // hide the end markers
  waypoints: [
    L.latLng(51.150572381981256, -1.8110790497172475), // start point
    L.latLng(51.09703864177901, -1.7331746181837577)  // end point
  ]
}).addTo(map);

`

Working React-Leaflet code...

src/index.js `

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import './index.css'; 
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);`

src/App.js `

import './App.css'; 
import Map from './Map';
function App() {
  const title = "My Map App";

  return (
    <div className="App">
      <div className="content">
        <h1>{title}</h1>
        <Map />
      </div>
    </div>
  );
}

export default App;`

src/Map.js `

import React from 'react'; 
import { MapContainer, TileLayer } from 'react-leaflet'; 
import 'leaflet/dist/leaflet.css';
const Map = () => {
  const position = [51.178839, -1.82593]; // Initial map coordinates

  return (
    <MapContainer center={position} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
};

export default Map;`

I started off with the Openstreetmap tilelayer to check everything was working and then replaced the tile layer with the ordnance survey leisure_27700 and my apikey.

I've tried placing the transform coordinates code within the Map.js component, but tbh I have just been stabbing in the dark a nothing I have tried seems to work.