Generating gantt chart app in shiny in R; updating data and gantt chart within app

Question

I am trying to develop a simple gantt chart app within Shiny in R. The user should be able to update the gantt chart and the accompanying table along with it with new tasks (ideally I would also like the user to be able to delete tasks to mark them as "done").

I would like the app to launch and display the gantt chart and the table immediately. Here is the code to do this:-

library(tidyverse)
library(shinyjs)
library(shiny)
library(timevis)

ganttdata <- structure(list(Task = c("Project 1", "Project 2", "Project 3", 
                                     "Project 4"), Start = structure(c(1648771200, 1648944000, 1649289600, 
                                                                       1649548800), class = c("POSIXct", "POSIXt"), tzone = "UTC"), 
                            End = structure(c(1649116800, 1649289600, 1650326400, 1650326400
                            ), class = c("POSIXct", "POSIXt"), tzone = "UTC")), row.names = c(NA, 
                                                                                              -4L),
                       class = c("tbl_df", "tbl", "data.frame"))




if (interactive()) {
  library(shiny)

  shinyApp(
  ui = fluidPage(timevisOutput("timeline")),
  server = function(input,output) {
    output$timeline <- renderTimevis(
      timevis()
    )
  }
 )
  
  data <- data.frame()
  
  ui <- fluidPage(
    useShinyjs(),
    navbarPage("",
               tabPanel("tab",
                        div(id = "Sidebar",
    sidebarPanel(
      textInput("name", "Name of task"),
      dateInput("startdate", "Select start date", value = "2022-04-01"),
      dateInput("enddate", "Select end date", value = "2022-04-30"),
      actionButton("button", "Add item")
    ),
    mainPanel(
      timevisOutput("ganttchart"),
      column(dataTableOutput("ganttdatatable"),width = 8)
    )
    )
    )
    )
    
  )
  
  server <- function(input, output, session) {
    
    #creating data to use for gantt chart
    #this extracts the columns from the ganttdata dataframe
    data <- data.frame(
      id = as.factor(1:nrow(ganttdata)),
      start = as.factor(ganttdata$Start),
      end = as.factor(ganttdata$End),
      content = as.factor(ganttdata$Task),
      style = as.factor("color: red;")
    )
    output$ganttdatatable<-renderDataTable({
      ganttdata
    })
    
    output$ganttchart<-renderTimevis(
      timevis(
        data,
        options = list(editable = TRUE, multiselect = TRUE, align = "center")
      )
    )

    
    observeEvent(input$button,{
      
      ganttdata_newrow<-data.frame(
        Task = as.character(input$name),
        Start = lubridate::ymd(input$startdate),
        End = lubridate::ymd(input$enddate)
      )
      
      ganttdata<-rbind(ganttdata,ganttdata_newrow)


    
    })
    
  }
  shinyApp(ui,server)
}

Which gives you this:-

However, I am unable to update the table and the gantt chart in the UI whenever I go to add a new task in the sidebarPanel. I have tried placing both output$ganttdatatable and output$ganttchart inside the observeEvent function but this prevents the gantt chart and the data table from loading as soon as the app launches.

What I would like is that when the app launches, both the gantt chart and the data table are visible straight away, and that both can be updated when the user inputs a new task and clicks the action button. Is there a way to do both?

Many thanks!