chakra-ui & css question: Show html text inside Popover

Question

I want to show html text <ul><li>test</li><li>test</li><li>test</li></ul> inside popover when I hover "HOVER HERE".

This is what I want↓

• test
• test
• test

Here is my code

 <Popover placement="top-start" trigger="hover">
  <PopoverTrigger>
   <span>HOVER HERE</span>
  </PopoverTrigger>
  <PopoverContent backgroundColor="white" color="black">
  <PopoverBody>
   <div dangerouslySetInnerHTML={{ __html: "<ul><li>test</li><li>test</li><li>test</li></ul>" }} />
  </PopoverBody>
 </PopoverContent>
</Popover>

With the code above, I've got this

so I added css

<PopoverBody>
   <div className={textCss} dangerouslySetInnerHTML={{ __html: "<ul><li>test</li><li>test</li><li>test</li></ul>" }} />
</PopoverBody>

import { style } from "@vanilla-extract/css";

export const textCss = style({
        display:"list-item",
        listStyleType:"disc", 
})

now I get this↓

list with only one bullet point..

Is there any way to display list item with bullet points, one on each line?