FreshDesk widget not switching between the freshDeskAdmin and the freshDesk API in Next.js

Question

I am trying to load a FreshDesk widget in a Next.js app, but the widget is not switching between the freshDeskAdmin and the freshDesk API when I pass a prop to the component.

I have imported the useConfig hook, which contains my env variables and I am using a ternary operator to determine which widget ID to use. Still, the widget is always showing me the wrong one.

The issue seems to disappear when I do refresh the page.

I have tried moving the ternary operator inside the fwSettings object, but it still doesn't work. I am unsure what the problem is, could you help me to fix this?

An example plus the code below I cannot show more due policies but what I did was refresh the page and the right widget loaded back. I have a widget called 'help' and one 'support'.

Depending on the page, it shows one or the other. In this image should show support

The FreshDesk component

import { useConfig } from '@lib/config';
import Script from 'next/script';

const FreshDesk = ({ isStudyAdmin }) => {
  const { freshDesk, freshDeskAdmin } = useConfig();
  return (
    <>
      <Script
        src={`https://widget.freshworks.com/widgets/${
          isStudyAdmin ? freshDeskAdmin : freshDesk
        }.js`}
        strategy="afterInteractive"
      />

      <Script id="freshdesk-initialization" strategy="afterInteractive">
        {`window.fwSettings={
            'widget_id': ${isStudyAdmin ? freshDeskAdmin : freshDesk}
          };
          !function(){if("function"!=typeof window.FreshworksWidget)
        {var n=function(){n.q.push(arguments)};
        n.q=[],window.FreshworksWidget=n}}()`}
      </Script>
    </>
  );
};

export default FreshDesk;

And how it is used and you can find it in the bottom of the script I removed what was not necessary in this code

import { useCheckAccess } from '@lib/authentication';
import { AppBar, Box, Tab, Tabs, Toolbar } from '@mui/material';
import { useRouter } from 'next/router';
import { useIntl } from 'react-intl';
import FreshDesk from 'src/components/FreshDesk';
import Link from 'src/components/LinkNext';
import AdminLayout from 'src/layouts/AdminLayout';

function AdminSettingsLayout({ children }) {
  const intl = useIntl();
  const router = useRouter();
  const { checkAccess } = useCheckAccess();

  return (
    <AdminLayout>
      <Box
        sx={{
          bgColor: 'white',
          border: '1px solid lightgrey',
          borderRadius: 2,
        }}
      >
        <AppBar
          position="static"
          color="transparent"
          square
          elevation={0}
          sx={{ boxShadow: '0px -1px 0px lightgrey inset' }}
        >
         ........
         ........ 
        </AppBar>
        <FreshDesk isStudyAdmin="true" />
        {children}
      </Box>
    </AdminLayout>
  );
}

export default AdminSettingsLayout;