I am trying to add a legend in my Leaflet map at the bottom right corner, Ive actually written the code halfway near the end of the code and I do not know how to continue, I want it displayed in the bottom right corner such that the legend is in a rectangle box with the heading 'Legend' and the categories 'Tobacco', 'Whiskey', 'Beer' , 'Cigar', 'Other' with a color in a small box to indicate the sub-category, just to show you an example of what I am saying is: If anyone knows how to proceed on with my current code to be something like the given picture, do let me know.

// Javascript code
// Initialise the map
var southWest = L.latLng(-89.98155760646617, -180), northEast = L.latLng(89.99346179538875, 180);
var bounds = L.latLngBounds(southWest, northEast);
var mymap = L.map('map', {
    center: [20.594, 78.962],
    maxBounds: bounds, // set max bounds for the world map
    zoom: 4, // default zoom level when the web is initiated
    zoomSnap: 0.25, // map's zoom level must be in multiple of this
    zoomDelta: 0.25, // controls how much the map's zoom level will change after a zoom
    minZoom: 3.25, // min zoom level the user can zoom out
    maxZoom: 6, // max zoom level the user can zoom in
    zoomControl: true, // allow zooming
});
mymap.zoomControl.setPosition('topright'); // set + and - zoom buttons to top right corner .setOpacity('0.4')
L.DomUtil.setOpacity(mymap.zoomControl.getContainer(), 0.2); // set opacity of zoom buttons
var MapAttribution = '&copy; <a href="">OpenStreetMap</a> contributors &copy; <a href="">CARTO</a>';
var DarkMatterUrl = 'https://{s}.basemaps.cartocdn/dark_all/{z}/{x}/{y}{r}.png'; // For dark theme map
var PositronUrl = 'https://{s}.basemaps.cartocdn/light_all/{z}/{x}/{y}{r}.png'; // For light theme map
var tiles = L.tileLayer(DarkMatterUrl, { MapAttribution }).addTo(mymap); 
// Array of marker coordinates
var markers = [
    {
        coords:[4.21, 101.97],
        country:'Malaysia',
        label:'Malaysia',
    },
    {
        coords:[20.594, 78.962],
        country:'India',
        label:'India',
    },
    {
        coords:[35.861, 104.195],
        country:'China',
        label:'China',
    },
    {
        coords:[23.421, 53.8478],
        country:'UAE',
        label:'UAE',
    },
    {
        coords:[23.6978, 120.9605],
        country:'Taiwan',
        label:'Taiwan',
    },
    {
        coords:[0.7892, 113.9213],
        country:'Indonesia',
        label:'Indonesia',
    },
];
// Edit marker icons
var myIcon = L.icon({
    iconUrl: 'yellowcircle.png',
    iconSize: [40, 40], // size of the icon
    // iconAnchor: [],
    // popupAnchor: [],
});
// Loop through markers
for(var i = 0; i<markers.length; i++){
    addMarker(markers[i]);
}
// To add the marker coordinates
function addMarker(props){
    var marker = L.marker(props.coords, {icon: myIcon}).bindTooltip(props.country, {
        permanent: true,
        direction:'bottom',
        opacity:0.5,
    }).addTo(mymap); // set {permanent: true} beside props.country for
    marker.on('mouseover', function(e){
        marker.openPopup(); 
    });
    marker.on('mouseout', function(e){
        marker.closePopup();
    });
}
// For GeoJSON features
var StringLines = [{
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [113.9213, 0.7892],[101.97, 4.21],[120.9605, 23.6978] // From Indonesia to Malaysia to Taiwan
            ]
    }
}, {
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [53.8478, 23.421],[101.97, 4.21],[104.195, 35.861],[78.962, 20.594] // From UAE to Malaysia to China to India
            ]
    }
}];
// Edits for LineStrings
var LineStringColor = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
}
L.geoJSON(StringLines, {style: LineStringColor}).addTo(mymap); // add geoJSON features to the map
// Legend for the pie chart
var legend = L.control({position: 'bottomright'});
    legend.onAdd = function(mymap){
        var div = L.DomUtil.create('div', 'legend');
        labels = ['<strong>Categories</strong>'],
        categories = ["Tobacco","Whiskey","Beer","Cigar","Other"];
        return div;
    };
legend.addTo(mymap);
// For side menu hamburger
const menuIcon = document.querySelector(".hamburger-menu");
const navbar = document.querySelector(".navbar");
menuIcon.addEventListener('click', () => {
    navbar.classList.toggle('change');
});