Issue with dynamic theme

[tPandzic]

Hello!

I've been trying to create a custom component that integrates Tippy in our project and for the most part it works great.

However I've been having issues with "theme" prop. Im confused as to why am I getting undefined with theme, but everything else works as intended?

If I was to put theme as default to 'light' inside the component then it works, but dynamically nothing.

This is the component in question:

import Tippy from '@tippyjs/react';
import 'tippy.js/themes/light.css';
import 'tippy.js/themes/light-border.css';
import 'tippy.js/themes/material.css';
import 'tippy.js/themes/translucent.css';
import 'tippy.js/dist/tippy.css';

const Tooltip = ({ theme, content, placement, className, arrow, children }) => {
  return (
    <Tippy
      theme={theme}
      className={className}
      content={content}
      arrow={arrow}
      placement={placement}
    >
      {children}
    </Tippy>
  );
};

And this is how I am trying to call it in a random example:

 <Tooltip
        content='Total number of registered users.'
        placement='right'
        theme='light'
      >
        <div className='user-count-pill'>
          <span className='user-count'>{usersList?.length || 0}</span>
        </div>
 </Tooltip>

Thanks a lot for all the help you can provide.