How to add LayerGroups to a marker in React Leaflet

Question

I'm getting confused about LayerGroups in React Leaflet.

I am iterating through an object with markers in React Leaflet (using Gatsby), and when I add the marker I want to assign the LayerGroup based on an attribute in the object I am iterating through.

Currently the main bit of the code looks like this:

const IndexPage = ({ data }) => (
    <main>
        <MapContainer style={{ height: '100vh', width: '100vw'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
          {
            data.allMarkdownRemark.edges.map((edge, i) => (
              <Marker position={edge.node.frontmatter.location}>
                <Popup>
                {edge.node.frontmatter.Name}
                </Popup>
            </Marker>
            ))
          }
        </MapContainer>
    </main>
  )

How do I add and create LayerGroups?

In React Leaflet, you seem to do so by adding <LayerGroup> tags and then nest the markers within the correct one, but I'm not sure how that would work with my scenario. If I weren't using React I would do aMarker.addTo(aLayerGroup) - but I'm not sure how I'm supposed to be doing that in the React context.