You should decalre data type for type when you declare skyLayer. Because the default type will be string and can' be pass into Layer. You can use as to do it:

  const skyLayer = {
    id: 'sky',
    type: 'sky' as 'sky',
    paint: {
      'sky-type': 'atmosphere',
      'sky-atmosphere-sun': [0.0, 0.0],
      'sky-atmosphere-sun-intensity': 15
    }
  };

You want to keep a mapboxgl.Map in the ref, and you also want it to be null before it's initialized. So that means your ref type is:

const map = React.useRef<mapboxgl.Map | null>(null);

This is good to fix (it's good to eliminate all uses of any), but that has nothing to do with the error you are getting.

When you have a ref, you always access what it's referencing via the current property. So you simply need to change your last lines to this:

map.current.addSource(/* ... */)

Working example playground