Why is onBlur not triggered when I click outside of the component? - reactjs

Question

I'm facing an issue triggering the onBlur on the color input tag. I have the parent component in which I toggle the visibility of the children by using a custom hook, but the thing is when I select a color with the input color from the children, when I click outside, the onBlur it's not triggered and I have no idea why.
I need to use this specific behavior with the useClickOutside + onBlur to trigger my future actions so I would like to know is there is a way to make it work?
custom hook:
import { useRef, useEffect } from 'react';
const useClickOutside = <T extends HTMLElement = HTMLDivElement>(callback: (event?: MouseEvent) => void) => {
const elementRef = useRef<T>(null);
useEffect(() => {
const handler = (event: MouseEvent) =>
elementRef.current && !elementRef.current.contains(event.target as Node) && callback(event);
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, [callback]);
return elementRef;
};
export default useClickOutside;
parent component:
// other code before this part is not relevant for the question
const [toggle, setToggle] = useState(false);
const tagWidgetRef = useClickOutside(() => {
setToggle(false);
updateLabelsCallback();
});
return(
<div>
{/* other html here too... */}
{toggle && (
<LabelWidgetUpdate
className='right-20 top-12 z-50'
ref={tagWidgetRef}
setNewLabel={setUpdateTaskObject}
/>
)}
</div>
)
children component:
export const LabelWidgetUpdate = React.forwardRef<HTMLDivElement, LabelWidgetUpdateProps>(
({ setNewLabel, className }, ref) => {
const [newColor, setNewColor] = useState('');
return (
<div ref={ref} className={`absolute z-50 mt-4 w-56 rounded-md bg-white p-4 ${className}`}>
<input
onChange={e => setNewColor(e.target.value)}
onBlur={() => console.log('Blur triggered')}
type='color'
className='h-6 w-6 cursor-pointer rounded-md'
/>
{/* other html here too... */}
</div>