Bug: Warning: Invalid hook call on home page load

[babblebey]

When running the development server and loading the home page, there are instances where the below error occurs with the message displayed on the terminal:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

It is important to state that this does not affect or stop the homepage from functioning as it should.

Context:

• Project is using Astro with React.

• Versions of related dependencies:

  • astro: ^4.5.9
  • @astrojs/react: ^3.1.0
  • react: ^18.2.0
  • react-dom: ^18.2.0

• Running on Windows.

• The error occurs on the home page at src/pages/index.astro, which includes two islands with React integration: recent-searches.jsx and search.jsx in the src/components/islands directory.

Steps to Reproduce:

1. Start the development server, running npm run dev.
2. Load the home page.
3. Look at the terminal

Expected Behavior:
The home page should load without any errors in the terminal.

Actual Behavior:
The "Invalid hook call" error occurs with the above stated message in the terminal.

Proposed Solution:
I got none for now 😆, Let's just Investigate and address the possible causes listed in the error message. Also, Ensure that React and its dependencies are correctly matched and that there is no duplication of React in the project.