You’re not supposed to make HTTP requests etc directly inside React components, you need to use useEffect.
A react component needs to run as quickly as possible, even if work that needs doing isn’t finished yet. By using useEffect you tell React to run a separate function after rendering is complete, giving you the opportunity to make requests and for your component to have “effects”. React also lets you pass a list of dependencies that it will watch, and if they change the effect re-runs.
What you have however, is a side effect that runs directly in the component. As a result, whenever the component is re-rendered, your code makes a HTTP fetch, which aside from this problem is also going to significantly slow down the editor. A re-render could happen at any time by design. A window resize, stray dom event, state changes in parent components, etc
If it helps, a common way to show this is with something like this:
const { isLoading, setLoading } = useState( false );
This way you can call setLoading( false ) at the end of your useEffect function, and then display a loading message in the component
This is another part of the function: an input that updates the Product ID that is used for the GET request and a button linked to the fetchingId() function.
You cannot rely on those values being present here. You can trigger a function via an event, and that function can have side effects such as HTTP requests, but you can’t do those things directly in the component. Rendering the component should render the component, and only render the component, everything else goes in lifecycle hooks/functions