Adding the color argument to my px.timeline figures starts a new y-scale for each category. How do I use color so that the y-scale isn't interrupted?

Question

I am a new hobby coder and I'm trying to plot a traveler's timeline of visits to places around the world. I have an example of the graph I would like but passing the color parameter of Plotly's px.timeline function resets the y-scale for each color category. Any tips would be super helpful and if I haven't posted my question in the right way do let me know how to do it better :). Cheers

This is the figure I would like. I want each data point coloured according to continent visited

Figure I get when I add the color parameter to color by continent.

The following is the code I'm using.

fig = px.timeline(dates_in_country, 
                  x_start="DateIn", 
                  x_end="DateOut",
                  color='Political Continent',
                  hover_name="Country",
                  )
fig.show()

I have tried the following to order the axis but nothing has worked.

**Attempt 1: ** The following figure update did not work. Note: The column 'order' is just a number representing each data entry in the order I want it.

fig.update_xaxes(categoryorder='array', categoryarray = dates_in_country.Order

Attempt 2: Use the parameter "category_orders" and pass a dictionary to it. I created a dictionary of the order I want each entry to be in and passed this to the code but it also did not work.

dict_order = dates_in_country.set_index('Order')['Country'].to_dict

fig = px.timeline(dates_in_country, 
                  x_start="DateIn", 
                  x_end="DateOut",
                  color='Political Continent',
                  hover_name="Country",
                  category_orders=dict(group=dict_order)
                  )
fig.show()

I also wonder why the y axis has just "cuts-off" when I add the color parameter?