return (
    // other elements
    <MeshGradient colors={additonalColors} gradientId={'gradient-canvas-now-playing'} />
  );

'use client';
import { Gradient } from '../../../../../lib/utils/Gradient';
import { useEffect, useRef } from 'react';

export default function MeshGradient({ gradientId, colors }) {
  const gradient = new Gradient();
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      gradient.init(`#${gradientId}`);
    }
  }, [ref]);

  return (
    <canvas
      ref={ref}
      style={{
        '--gradient-color-1': colors[0],
        '--gradient-color-2': colors[1],
        '--gradient-color-3': colors[2],
        '--gradient-color-4': colors[3],
      }}
      className='absolute left-0 top-0 h-full w-full rounded-3xl'
      id={gradientId}
      data-transition-in
    />
  );
}