Issue in NextJS / ReactJS while clicking on a button to load a different component into the current component

In NextJS, I have 3 components "Sidebar", "Woven" and "ToolsPage", the respective codes are attached below.

ToolsPage:

"use client"
import Woven from './components/weaved';
import Sidebar from './sidebar';
import { useState } from 'react';

const ToolsPage = () => {
  const [selectedTool, setSelectedTool] = useState('');

  const handleToolClick = (tool: string) => {
    setSelectedTool(tool);
  };

  const renderToolComponent = () => {
    if (selectedTool === 'weaviate') {
      console.log("inside render")
      return <Woven />;
    }
    return <></>;
  };

  return (
    <>
      <Sidebar onToolClick={handleToolClick} />
      <div>
        {selectedTool ? (
          // Render the selected tool component
          <>
            <div>{selectedTool}</div>
            {renderToolComponent()}
          </>
        ) : (
          <></>
        )}
      </div>
    </>
  );
};

export default ToolsPage;

Woven tool component:

"use client"

import { useState } from "react"

const Woven = async () => {
const [weaveApiKey,setWeaveApiKey] = useState('')
const [weaveURL,setWeaveURL] = useState('')

return(
    <>
    <form>
    <label>
          Weaviate API key:
          <input
            type="text"
            value={weaveApiKey}
            onChange={(e) => setWeaveApiKey(e.target.value)}
          />
        </label>
        <br/>
        <label>
          Weaviate Cluster URL:
          <input
            type="text"
            value={weaveURL}
            onChange={(e) => setWeaveURL(e.target.value)}
          />
        </label>
        <br/>
        </form>
        </>
)}

export default Woven

Sidebar component:

"use client"

type SidebarProps = {
  onToolClick: (tool: string) => void;
};

const Sidebar: React.FC<SidebarProps> = ({ onToolClick }) => {
  const toolNames = ['weaviate']; // Add other tool names as needed

  return (
    <div>
      <h2>Tools</h2>
        {toolNames.map((tool,index) => (
          <button key= {index} onClick={() => onToolClick(tool)}>
            {tool}
          </button>
        ))}
    </div>
  );
};

export default Sidebar;

Here I hardcoded only one tool called "weaviate"
This is the sample output screen if I click on the weaviate button (The component did not appear):

My main motive here is to load the Woven component in the ToolsPage on clicking the weaviate button as shown in the picture.

Here the code enters the renderComponent() function successfully (as shown using console log statement in ToolsPage component but it is repeating multiple times continuously and screen got struck)

But the Woven component is not appearing after clicking on the hardcoded weaviate button.

I tried another case- I initiated the state directly to "weaviate" in the ToolsPage line 7

const [selectedTool, setSelectedTool] = useState('weaviate');

Then the component appeared:

But on clicking the button gives the same issue.

Final target: On clicking the button should load the Woven component without the multiple re-renderings

Try creating a separate component for the renderToolComponent and pass selectedTool as its props. Also, remove async from the Woven component and try again and if you want to make an API call in that component to fetch data on server side and render it then define an async function above the component declaration as explained here: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching