I'm trying to render different SVGs in each option component of Chakra UI's Select component but can't seem to display any images inside of the option component.
Both of the following implementations display [object Object] in the option.
import SVG from './file.svg'
// Also tried both of the following:
// import SVG from './file.tsx'
// import {ReactComponent as SVG} from './file.svg';
return (
<Select>
<option>
<SVG />
</option>
</Select>
);
import SVG from './file.svg'
return (
<Select>
<option>
<img src={SVG} alt=''/>
</option>
</Select>
);
The only way I was able to display SVG at all in Chakra's Select component was through the icon prop, but that would replace the dropdown icon which I do not want to do.
Let me know if there's any way I can break down or minimize the problem further.
Is there any way to customize my Select component to render SVGs with Chakra UI?