I have an <Avatar/> component and the text inside of it is color white,
How do I make sure that its background color is dark so the text can be seen since its dynamically generated?

Codesandbox —–> CLICK HERE

CODE:

  const colors = useMemo(() => {
    const randomColors = persons.map(() => `#${Math.floor(Math.random() * 16777215).toString(16)}`);
    return randomColors;
  }, [persons]);