OpenLayers 8: How to use local OSM file as base map

Question

I wish to use a local .osm file as base map in OpenLayers.

Actual behavior: OpenLayers is showing, but base map is completely empty (white)

Expected behavior: OpenLayers is showing with base map from .osm file that shows Santa Monica Mountains National Recreation Area, the rest of the map should be empty (white)

Code:

import 'ol/ol.css';
import { useEffect, useRef } from 'react';
import { defaults, DragPan, MouseWheelZoom } from 'ol/interaction';
import { Map, View } from 'ol';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import VectorTile from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile';
import OSMXML from 'ol/format/OSMXML';

export function App() {
    const mapElement = useRef<HTMLDivElement | null>(null);
    const mapRef = useRef<Map>();

    useEffect(() => {

        const osmVectorLayer = new VectorLayer({
            source: new VectorSource({
                url: 'test-osm-file.osm',
                format: new OSMXML()
            })
        })

        const map = new Map({
            target: mapElement.current ?? undefined,
            interactions: defaults({
                dragPan: false,
                mouseWheelZoom: false,
            }).extend([new DragPan({}), new MouseWheelZoom({ duration: 0 })]),
            view: new View({
                center: [0, 0],
                zoom: 2,
            }),
            layers: [
                osmVectorLayer
            ]
        });

        mapRef.current = map;
    }, []);

    return <div style={{ height: '100vh', width: '100%' }} ref={mapElement} className="map-container" />;
}

export default App;

Local OSM file (Santa Monica Mountains National Recreation Area):

<?xml version='1.0' encoding='UTF-8'?>
<osm version='0.6' generator='JOSM'>
  <bounds minlat='34.0662408634219' minlon='-118.736715316772' maxlat='34.0731374116421' maxlon='-118.73122215271' origin='OpenStreetMap server' />
  <node id='358802885' timestamp='2009-03-11T06:30:08Z' user='yellowbkpk' visible='true' version='1' lat='34.0666735' lon='-118.734254'>
    <tag k='gnis:created' v='06/14/2000' />
    <tag k='gnis:county_id' v='037' />
    <tag k='name' v='Santa Monica Mountains National Recreation Area' />
    <tag k='leisure' v='park' />
    <tag k='gnis:feature_id' v='277263' />
    <tag k='gnis:state_id' v='06' />
    <tag k='ele' v='243' />
  </node>
  <node id='453966480' timestamp='2009-08-02T03:36:00Z' user='Apo42' visible='true' version='1' lat='34.07234' lon='-118.7343501' />
  <node id='453966482' timestamp='2009-08-02T03:36:01Z' user='Apo42' visible='true' version='1' lat='34.0670965' lon='-118.7322253' />
  <node id='453966143' timestamp='2009-08-02T03:35:45Z' user='Apo42' visible='true' version='1' lat='34.0724577' lon='-118.7364799' />
  <node id='453966130' timestamp='2009-08-02T03:35:44Z' user='Apo42' visible='true' version='1' lat='34.0671122' lon='-118.7364725' />
  <node id='453966490' timestamp='2009-08-02T03:36:02Z' user='Apo42' visible='true' version='1' lat='34.0722227' lon='-118.7322321' />
  <way id='38407529' timestamp='2009-08-02T03:37:41Z' user='Apo42' visible='true' version='1'>
    <nd ref='453966480' />
    <nd ref='453966490' />
    <nd ref='453966482' />
    <nd ref='453966130' />
    <nd ref='453966143' />
    <nd ref='453966480' />
    <tag k='park:type' v='state_park' />
    <tag k='csp:unitcode' v='537' />
    <tag k='admin_level' v='4' />
    <tag k='name' v='Malibu Creek State Park' />
    <tag k='csp:globalid' v='{4A422954-089E-407F-A5B3-1E808F830EAA}' />
    <tag k='leisure' v='park' />
    <tag k='attribution' v='CASIL CSP_Opbdys072008' />
    <tag k='note' v='simplified with josm to reduce node #' />
    <tag k='boundary' v='national_park' />
  </way>
</osm>