Move custom tag list demo to last in example page

example/src/index.html

@@ -131,11 +131,6 @@ <h2>Examples</h2>
       <div id="demo-1"></div>
     </section>
     <hr />
-    <section>
-      <h3>Custom tag list</h3>
-      <div id="demo-0"></div>
-    </section>
-    <hr />
     <section>
       <h3>Custom tags</h3>
       <div id="demo-2"></div>
@@ -156,6 +151,11 @@ <h3>Using the API</h3>
       <div id="demo-5"></div>
     </section>
     <hr />
+    <section>
+      <h3>Custom tag list component</h3>
+      <div id="demo-6"></div>
+    </section>
+    <hr />
     <section>
       <h2>Documentation</h2>
       <p>

example/src/main.jsx

@@ -1,18 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { CustomTags } from './demos/CustomTags'
-import { CustomTagList } from './demos/CustomTagList'
 import { CountrySelector } from './demos/CountrySelector'
+import { CustomTags } from './demos/CustomTags'
 import { CustomValidity } from './demos/CustomValidity'
-import { UsingTheAPI } from './demos/UsingTheAPI'
 import { AsyncSuggestions } from './demos/AsyncSuggestions'
+import { UsingTheAPI } from './demos/UsingTheAPI'
+import { CustomTagList } from './demos/CustomTagList'
 
 // HACK: Wait for onload to ensure styles are loaded due to a bug with Safari
 // <https://github.com/i-like-robots/react-tag-autocomplete/issues/44>
 window.onload = () => {
-  const container0 = ReactDOM.createRoot(document.getElementById('demo-0'))
-  container0.render(<CustomTagList />)
-
   const container1 = ReactDOM.createRoot(document.getElementById('demo-1'))
   container1.render(<CountrySelector />)
 
@@ -27,4 +24,7 @@ window.onload = () => {
 
   const container5 = ReactDOM.createRoot(document.getElementById('demo-5'))
   container5.render(<UsingTheAPI />)
+
+  const container6 = ReactDOM.createRoot(document.getElementById('demo-6'))
+  container6.render(<CustomTagList />)
 }