R shiny app tabitems are not displaying

Hello, I hope everyone is doing well. I really need help. I literally despaired. I'm trying to create a shiny app to learn but I'm stuck. I created a menu bar with items. And when I click on an item, there's nothing that shows up on the content-wrapper. Could you help me ?
Sorry my English is so bad.

if (!require("dplyr")) install.packages("dplyr") # data cleaning
if (!require("ggplot2")) install.packages("ggplot2") # plotting
if (!require("shiny")) install.packages("shiny") # dependency for shinydashboard
if (!require("shinydashboard")) install.packages("shinydashboard") # dashboard
if (!require("shinyjs")) install.packages("shinyjs")
library(shiny)
library(shinydashboard)
library(shinyjs)
library(ggplot2)
options(shiny.sanitize.errors = FALSE)
server <- function(input, output) {

}

Define the UI

ui <- dashboardPage(
title = 'Mercuriales',
dashboardHeader(
title = span('MERCU-PRIX', style = "color:black;"),
tags$li(
class = 'dropdown',
tags$h4(
HTML("ILE DE MAYOTTE
ET SES PERIPETIE"),
style = "color: black; text-align: center; font-size: 24px; padding-right: 340px;margin-top: 25px;"
)
)
),
dashboardSidebar(
sidebarMenu(
tags$li(
class = "menuItem", # Add the class "menuItem"
tags$a(
id = "accueil",
icon("home"),
href = "#",
tags$span(style = "padding-left: 10px;", "Accueil"),
style = "background-color: #6129BD;
margin-bottom: 40px;
margin-left: 18px;
margin-top: 60px;
margin-right: 15px;
border-radius: 15px;
color: white;
font-size: 15px;",
data-value = "accueil"# Set the tabName here
)
),
tags$li(
class = "menuItem", # Add the class "menuItem"
tags$a(
id = "produit",
icon("home"),
href = "#",
tags$span(style = "padding-left: 10px;", "Produit"),
style = "background-color: #F8F9FB;
margin-bottom: 10px;
margin-left: 18px;
margin-right: 15px;
border-radius: 15px;
color: black;
font-size: 15px",
data-value = "produit"
)
)
)
),
dashboardBody(
tags$script(HTML('
(document).ready(function() { (".menuItem").click(function() {
(".menuItem").removeClass("clicked"); (this).addClass("clicked");
var tabName = (this).attr("data-value"); Shiny.setInputValue("selectedMenuItem", tabName); }); }); (document).ready(function() {
(".menuItem").hover(function() { (this).toggleClass("hovered");
});
});
')),

tags$style(HTML("
/* Couleur au survol */
  .menuItem.hovered {background-color: #ddcef0;margin-left: 18px;
  margin-right: 15px;
  border-radius: 15px;}
  
  /* Couleur de fond au clic */
  .menuItem.clicked {background-color: lavender;
  margin-left: 18px;
  margin-right: 15px;
  border-radius: 15px;}
  
  .skin-blue .main-header .logo {
    height: 100px;
    padding-top: 25px;
    background-color: white;
    color: black;
  }
  
  .skin-blue .main-header .logo:hover {
    background-color: lavender;
  }
  
  .skin-blue .main-header .navbar {
    background-color: #F8F9FB;
  }
  
  .skin-blue .main-sidebar {
    background-color: #F8F9FB;
  }
  
  .content-wrapper, .right-side {
    background-color: #F1F3FC;
    #height: 100px;
  }
")),
tabItems(
  tabItem(tabName = "accueil",
          fluidRow(
            box(
              title = "Welcome to the Accueil Tab",
              "This is the content for the Accueil tab.",
              width = 6
            )
          )
  ),
  tabItem(tabName = "produit",
          fluidRow(
            box(
              title = "Products in the Produit Tab",
              "This is the content for the Produit tab.",
              width = 6
            )
          )
  )
)

)
)

shinyApp(ui, server)

server <- function(input, output) {}

shinyApp(ui, server)

its hard to read your code as its not been formatted . see the link at the end ...

but the usual mistake people make is reusing the same names for unique id's in shiny.
check that were you are required to uniquely id something, you havent used that name also elsewhere. i.e. check accueil etc. only name one thing

if (!require("shinydashboard")) install.packages("shinydashboard")
if (!require("rugarch")) install.packages("rugarch")
if (!require("dplyr")) install.packages("dplyr") # data cleaning
if (!require("ggplot2")) install.packages("ggplot2") # plotting
if (!require("shiny")) install.packages("shiny") # dependency for shinydashboard
if (!require("shinydashboard")) install.packages("shinydashboard")  # dashboard
if (!require("shinyjs")) install.packages("shinyjs")
if (!require("dashboardthemes")) install.packages("dashboardthemes")
if (!require("plotly")) install.packages("plotly")
library(shiny)
library(shinydashboard)
library(shinyjs)
library(ggplot2)
library(dashboardthemes)
library(plotly)

ui <- dashboardPage(
  title = 'Mercuriales',
  dashboardHeader(
    title = span('MERCU-PRIX', style = "color:black;"),
    tags$li(
      class = 'dropdown',
      tags$h4(
        HTML("DIRECTION DE L'ALIMENTATION, DE L'AGRICULTURE <br> ET DE LA FORÊT DE MAYOTTE"),
        style = "color: black; text-align: center; font-size: 24px; padding-right: 340px;margin-top: 25px;"
      )
    )
  ),
  dashboardSidebar(
    sidebarMenu(
      tags$li(
        class = "treeview",
        tags$a(
          id = "accueil",
          icon("home"),
          href = "#",
          tags$span(style = "padding-left: 10px;", "Accueil"),
          style = "background-color: #6129BD;
                  margin-bottom: 40px;
                  margin-left: 18px;
                  margin-top: 60px;
                  margin-right: 15px;
                  border-radius: 15px;
                  color: white;
                  font-size: 15px;",
          tabName = "accueil"  # Set the tabName here
        )
      ),
      tags$li(
        #class = "treeview",
        tags$a(
          id = "produit",
          icon("home"),
          href = "#",`data-value`="produit",
          tags$span(style = "padding-left: 10px;", "Produit"),
          style = "margin-bottom: 10px;
                  margin-left: 18px;
                  margin-right: 15px;
                  border-radius: 15px;
                  color: black;
                  font-size: 15px"
           # Set the tabName here
        )
      )
    )
  ),
  dashboardBody(
    tags$script(HTML(' /* Couleur de fond au clic */
      $(document).ready(function() {
          $(".menuItem").click(function() {
              $(".menuItem").removeClass("clicked");
              $(this).addClass("clicked");
          });
      });')),
    
    tags$style(HTML("
      /* Couleur de fond au clic */
      .menuItem.clicked {background-color: lavender;}
      
      /* couleur Titre background */
      .skin-blue .main-header .logo {
        height: 100px;
        padding-top: 25px;
        background-color: white;
        color: black;
      }
      
      /* Couleur titre à l'appui */
      .skin-blue .main-header .logo:hover {
        background-color: lavender;
      }
      
      /* Couleur à côté du titre */
      .skin-blue .main-header .navbar {
        background-color: #F8F9FB;
      }
      
      /* Couleur background sidebar */
      .skin-blue .main-sidebar {
        background-color: #F8F9FB;
      }
      
      /* Couleur à droite  */
      .content-wrapper, .right-side {
        background-color: #F1F3FC;
        height: 100px;
      }
    ")),
    tabItems(
      tabItem('rgt',
              tabName = "accueil",
              fluidRow(
                box(
                  title = "Welcome to the Accueil Tab",
                  "This is the content for the Accueil tab.",
                  width = 6
                )
              )
      ),
      tabItem('gdh',
              tabName = "produit",
              fluidRow(
                box(
                  title = "Products in the Produit Tab",
                  "This is the content for the Produit tab.",
                  width = 6
                )
              )
      )
    )
  )
)

server <- function(input, output) {
  output$rgt <- renderUI({
    # You can add any UI components you want to display in the "Accueil" tab here
    fluidRow(
      box(
        title = "Welcome to the Accueil Tab",
        "This is the content for the Accueil tab.",
        width = 6
      )
    )
  })
  
  # Content for the "Produit" tab
  output$gdh <- renderUI({
    # You can add any UI components you want to display in the "Produit" tab here
    fluidRow(
      box(
        title = "Products in the Produit Tab",
        "This is the content for the Produit tab.",
        width = 6
      )
    )
  })
}

shinyApp(ui, server)

type or paste code here

Thank you ! it's the first time I'm using this.

if you follow : Getting started with Shiny Dashboard
you will see tabitems in the body are meant to be accompanied by menuItem(s) in the sidebarmenu, it seems you use other control types and not menIitems in the sidebarmenu?
tags$li ?

yes, I use tags$li to be able to configure the items separately (margin-top, border-radius etc). what I don't know how to do with menuItem.