How can I use the external javascript variables in a nextjs page?

Question

Now I'm building a webpage that shows a ranking of items. I'm fetching datas with an external javascript file and using it by putting tag in nextjs page. The script uses the window variable, so I couldn't make it API and execuse it on the serverside.

Now my page is like below.

<div>
<Script src="/weeklyRanking.js" />
</div>

In the js, I have items variable which is an array, and I want to use it in a page like below.

{items.map((item)=>(
 <div>{item}<div>
))}

How can I pass the variable from script tag to page?

I tried below, weeklyRanking.js

let items = [item1,item2,item3];
window.items = items;

page.jsx

import Script from 'next/script'

const page = () => {
  const [items, setItems] = useState([]);
  }
  useEffect(() => {
    setItems(window.items)
  }, [])
  
  return (
    <>
    {items.map((item)=>(
    <div key={item}>{item}</div>
    ))}
    <Script src="/weeklyRanking.js" />
    </>
  )
}

export default page

The result is the items variable is undefined.