How can I add styles to focus-visible on Flowbite Link component?

Question

I am currently using Flowbite Footer component in my application and I want to add custom styling to footer links using focus-visible pseudo-class. I am using tailwind and react. What am I missing here?

I used focus-visible:outline to style the color of the border. Here is how I did it?

<Footer.LinkGroup col={true} className="text-mj_grey-500">
  <Footer.Link href="#" className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-mj_red">Privacy Policy</Footer.Link>
  <Footer.Link href="#">Terms of purchase</Footer.Link>
  <Footer.Link href="#">Delivery</Footer.Link>
  <Footer.Link href="#">Return and open purchase</Footer.Link>
  <Footer.Link href="#">Reclaim</Footer.Link>
</Footer.LinkGroup>

I configured mj_* colors in my config file.

My target is having a red border when the links are in focus using Tab. How can I do that?