Add background section colors in using shapes

I created a plot using ggplot where I added background colors at certain regions of the plot:

p.ggplot +
geom_rect(aes(xmin= -Inf, xmax= Inf, ymin= -5, ymax= 0.2),alpha=0.3, fill="#b71e3f") +
geom_rect(aes(xmin= -Inf, xmax= Inf, ymin= 0.8, ymax= 1),alpha=0.3, fill="#1f59b7") +
geom_rect(aes(xmin= -Inf, xmax= Inf, ymin= 0.2, ymax= 0.8),alpha=0.3, fill="#514e4f") 

Unfortunately, the background shapes are not conserved when turning the ggplot object into a plotly object through ggplotly:

p.plotly <- ggplotly(p.ggplot)

Following the instructions on https://plot.ly/r/shapes/ , I added the following lines to the plotly object, but the output remains the same. Anybody know what Iā€™m missing?

p.plotly <- layout(p.plotly,

        shapes = list(
                     list(type = "rect",
                          fillcolor = "#b71e3f", line = list(color = "#b71e3f"), opacity = 0.3,
                          x0 = 0, x1 = 2, xref = "x",
                          y0 = -5, y1 = 0.2, yref = "y"),

                     list(type = "rect",
                           fillcolor = "#1f59b7", line = list(color = "#1f59b7"), opacity = 0.3,
                           x0 = 0, x1 = 2, xref = "x",
                           y0 = 0.2, y1 = 0.8, yref = "y"),

                       list(type = "rect",
                           fillcolor = "#514e4f", line = list(color = "#514e4f"), opacity = 0.3,
                           x0 = 0, x1 = 2, xref = "x",
                           y0 = 0.8, y1 = 1, yref = "y")))

htmlwidgets::saveWidget(as_widget(p.plotly), "sexCheckPlot.html")

Thank you.

Clearly this is a question for #api:r