Unable to name Scenarios and Tests in ExtentReport

Question

I have this testng file

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd" >
<suite name="herokuapp Suite" thread-count="3" parallel="tests">
    <test name="Chrome Tests">
        <parameter name="browser" value="Chrome"></parameter>
        <classes>
            <class name="cucumberOptions.TestNGTestRunner" />
        </classes>
    </test>
    <test name="Edge Tests">
        <parameter name="browser" value="Edge"></parameter>
        <classes>
            <class name="cucumberOptions.TestNGTestRunner" />
        </classes>
    </test>
    <test name="Firefox Tests">
        <parameter name="browser" value="Firefox"></parameter>
        <classes>
            <class name="cucumberOptions.TestNGTestRunner" />
        </classes>
    </test>
</suite>

and have this cucumber runner

package cucumberOptions;
import org.testng.annotations.DataProvider;
import io.cucumber.testng.AbstractTestNGCucumberTests;
import io.cucumber.testng.CucumberOptions;


@CucumberOptions(features={"src/test/resources/features"},glue ={"stepDefinitions"}
,monochrome=true,
plugin= {"pretty",
        "html:target/cucumberReports.html",
        "io.qameta.allure.cucumber7jvm.AllureCucumber7Jvm",
        "json:target/cucumberReports.json",
        "junit:target/cucumberReports/Cucumber.xml",
        "rerun:target/failed_scenario.txt",
        "com.aventstack.extentreports.cucumber.adapter.ExtentCucumberAdapter:"}
)
public class TestNGTestRunner extends AbstractTestNGCucumberTests{
    @Override
    @DataProvider(parallel = true)
    public Object[][] scenarios()
    {
        return super.scenarios();
    }
}

and here the feature file

@STCPlans
Feature: STC Plans Tests

Background:
    Given User is in STC Plan URL
  
 Scenario Outline: Verify Stc Tv Plan Prices
    Given User Chooses <country>
    Then Verify prices for each plan for <country>
      
 Examples:
            |country|
            |"KSA"|
            |"Kuwait"|

also the dependencies used for Extent Report

<!-- https://mvnrepository.com/artifact/com.aventstack/extentreports -->
        <dependency>
            <groupId>com.aventstack</groupId>
            <artifactId>extentreports</artifactId>
            <version>5.0.9</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/tech.grasshopper/extentreports-cucumber7-adapter -->
        <dependency>
            <groupId>tech.grasshopper</groupId>
            <artifactId>extentreports-cucumber7-adapter</artifactId>
            <version>1.12.0</version>
        </dependency>

and the extent.properties is

basefolder.name=test-output/ExtentReport/Report
basefolder.datetimepattern=d-MMM-YY HH-mm
extent.reporter.spark.start=true
extent.reporter.spark.out=spark.html

here is the report appears

I want 2 things 1)in the Extent Report to have each test from testng to be named with the parameter of browser ex==> STC Plans Chrome Tests , STC Plans Edge Tests ,STC Plans FirefoxTests but not STC Plans Tests for all of them ... (please check photo of report attached)

2)For each scenario as you can see the scenario has the same name but i want to add something different like the different parameter it has in the name so how can i do it