Using Overpass Turbo output as GeoJSON input to leaflet.js [closed]

Question

I'm trying to get GeoJSON using Overpass Turbo for a number of roads within a certain area. The input to Overpass below produces a map with the selected roads highlighted and what looks like JSON, but when I try to load apply this as a layer to a leaflet map, it says Uncaught (in promise) Error: Invalid GeoJSON object.

Am I right in thinking that OverPass Turbo produces GeoJSON or am I doing something wrong?

Update. As per @mmd's comment, I just needed to Export to GeoJson not just copy the contents of the Data pane.

Input to OverPass Turbo

[out:json][timeout:25];
// gather results
(
  // query part for: “highway=primary”
  area[name="West Midlands"];
  //node["highway"="primary"]({{bbox}});
  way[name ~"^(Bristol Road|Binley Road)"]({{bbox}});
  //relation["highway"="primary"]({{bbox}});
);
// print results
out body;
>;
out geom qt;

JavaScript to load GeoJSON and add to leaflet map

onMount(async () => {
    roads = await getRoads();
    leaflet = await import('leaflet');
    map = leaflet.map('map' ,{ scrollWheelZoom: false, touchZoom: false, dragging: false} ).setView({lat: 52.453269, lng: -1.67}, 11);

    leaflet.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{
                attribution: '© OpenStreetMap contributors, © CartoDB'
            }).addTo(map);
    map.attributionControl.setPosition('bottomleft');
    let roadsLayer = leaflet.geoJSON().addTo(map);
    roadsLayer.addData(roads);
})

Function to load GeoJSON

async function getRoads() {
    let geoJson = await json('./data/roads.geojson')
    return geoJson;
}

Answer 1

As per @mmd's comment, I just needed to Export to GeoJson not just copy the contents of the Data pane.