agora.io screen-sharing web sdk getDisplayMedia - reactjs

Question

I'm using Agora to create screen-sharing action and I'm stuck not being able to get it to work on Safari/MacOS. The code below is working for Chrome and Firefox in both Mac/Windows. Every time I click on this IconButton, the error message is in the screenshot below.
What could be the issue? I've compared this to Agora's sample code, but cannot figure what caused this bug.
<IconButton color='primary' onClick={shareScreenClient ? clearScreenStream : startScreenStream}>
{shareScreenClient ? <StopScreenShareOutlinedIcon fontSize='large' /> : <ScreenShareOutlinedIcon fontSize='large' />}</IconButton>
//here's the def of startScreenStream.
const startScreenStream = (e) => {
e.preventDefault();
screenClient.current = AgoraRTC.createClient(agoraClientObj);
const channel = classroom;
const token = null;
screenClient.current.init(appID, () => {
screenClient.current.join(
token,
channel,
null,
(screenUid) => {
// Create the screen-sharing stream, screenStream.
setScreenStreamObj((x) => ({
...x,
streamId: screenUid,
}));
let screenStreamObj = {
streamID: screenUid,
audio: false,
video: false,
screen: true,
screenAudio: true,
};
if (audioDeviceId) screenStreamObj.microphoneId = audioDeviceId;
if (videoDeviceId) screenStreamObj.cameraId = videoDeviceId;
if (isFirefox) screenStreamObj.mediaSource = 'screen';
screenStream.current = AgoraRTC.createStream(screenStreamObj);
screenStream.current.setScreenProfile('480p_1');
screenStream.current.init(
() => {
screenStream.current.play('screen-share', { fit: 'cover' }, () => {
console.log('sharing screen');
setShareScreenClient(true);
});
screenClient.current.publish(screenStream.current, (err) => {
console.error('publish failed', err);
//clearScreenStream();
});
},
(err) => {
screenStream.current = null;
setScreenStreamObj({});
console.error('could not init stream', err);
}
);
},
(err) => {
screenClient.current = null;
console.error('Could not join channel', err);
}
);
});
}