'use client'
import React from "react";
import { useState } from "react";
import SearchBar from "../searchbar/searchbar";
import Display from "../display/display";
import DataFetch from "../display/dataFetch";

export default function HomeBody() {
    const [text, setText] = useState('')
    const [isActive, setActive] = useState(0)
    
    const handleChange = (e) => {
        setText(e.target.value)
    }
    const handleSearchClick = (e) => {
        e.preventDefault()
        setActive(1)
    }
    return (
        <>
            <SearchBar text={text} onChange={handleChange} onSubmit={handleSearchClick}/>
            <Display text={text} isActive={isActive}><DataFetch/></Display>
        </>
    )
}

here I am trying to take the text from the searchbar component and pass it my display component and use the a server component to then make an api request to display the data I was under the assumption that to I needed to pass the server component as a prop for the client component like so here is the code for my display component

export default function Display({ text, isActive, children }) {
    return (
        isActive ? (
            <div>
                {children}
            </div>
        ) : (
            <div />
        )
    );
}

here is my server component

export default async function DataFetch() {
    
    return <div>Server</div>
}

I am not trying to do anything crazy rn just want to understand why this isnt working I thought I am properly passing in the server component as a prop but I keep getting an async await error when the async function is inside a server component