map won't append to container: d3 using r2d3 in R

Question

I'm trying to append a map to a div container using the r2d3 library in Rmarkdown:

library(r2d3)
library(htmltools)
htmltools::tagList(
  htmltools::tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"),
  htmltools::tags$script(src = "http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"),
  htmltools::tags$script(src = "https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3-scale-radial.js"),
  htmltools::tags$script(src = "https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js"),
  htmltools::tags$script(src = "https://api.tiles.mapbox.com/mapbox-gl-js/v0.14.3/mapbox-gl.js"),
  htmltools::tags$script(src = "https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js")
)

r2d3(data =my_data,
     script = "my_script.js",
     d3_version = "4",
     dependencies = "d3.v3.min.js",
     container="div",
     elementId = "mapContainer",
     css = "style.css")

style.css:

#mapContainer {
position: relative;
z-index: 0;
width: 500px;
height: 500px
}

my_script.js:

This fails:

// !preview r2d3 data=my_data, d3_version = "4", container = "div"

mapboxgl.accessToken = token;
  var map = new mapboxgl.Map({
    container: "mapContainer",
    style: "mapbox://styles/mapbox/streets-v9",
    center: [-74.5, 40.0],
    zoom: 9
  });

I can see from the DOM that a div "mapContainer" is created, and that map elements have been put inside it, but the map itself doesn't render on the page (simply blank).

If I append a new div and use that as the map container, the map appears to render.

d3.select("div")
    .append("div")
    .attr("id", "map")
    

mapboxgl.accessToken = token;
  var map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v9",
    center: [-74.5, 40.0],
    zoom: 9
  });