Wrong scopes prompted on after google login on my site

I am using 3rd party google login form our react js website. It is working fine. After that, I am enabling YouTube and google drive service on my two different pages for this I passed the scopes parameter with gapi.client.init() function but when I clicked on connect YouTube button google prompted me YouTube scopes as well as google drive scopes. The same problem I am facing on connect google drive page. All I want is it to show YouTube scope/permission on connect YouTube page and google drive scope/permission on connect google drive page.

Here is code:

window.gapi.client.init({
    'apiKey': REACT_APP_GOOGLE_API_KEY,
    'clientId': REACT_APP_GOOGLE_CLIENT_ID,
    'scope': REACT_APP_GOOGLE_SCOPE_YOUTUBE,
    'access_type': 'offline',
    'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest']
})  

window.gapi.client.init({
    'apiKey': REACT_APP_GOOGLE_API_KEY,
    'clientId': REACT_APP_GOOGLE_CLIENT_ID,
    'scope': REACT_APP_GOOGLE_SCOPE_DRIVE,
    'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
})

Please help me with this