I'm trying to get in practice with GraphQL in React, consuming nHost backend service to retrieve and save data from/to a database. I succesfully made into log in and log out in the app, but now turns out a problem. Showing the data in a DataTable, works just fine, but the problem is: when I try to render a component passing data as props, the component does not render at all. In theory: the button showed at the end of the code (rendered only if a selection of the table is made), should trigger the handleView, which should render the component with the props passed by. Note: console.log shows data. Also, React router dom is implemented in the app. Does it matter? Or just my code is not properly implemented?

Code below:

const [searchInput, setSearchInput] = useState('');
const [selectedclient, setSelectedclient] = useState(null)

const handleView = (e) => {
        e.preventDefault();
        console.log(selectedclient)
        if(selectedclient != null) 
            return <MainPanel data={selectedclient}/>
    }

return (
        <div>
            <form onSubmit={(e) => handleView(e)}>
                <input
                    className="input"
                    placeholder="insert the user you are looking for"
                    value={searchInput}
                    onChange={e => setSearchInput(e.value)}
                    ></input>
                <div className="card">
                    <DataTable value={filtered} selectionMode="single" selection={selectedclient} onSelectionChange={e => setSelectedclient(e.value)} dataKey="name" responsiveLayout="scroll">
                        <Column selectionMode="single" headerStyle={{width: '3em'}}></Column>
                        <Column field="name" header="Name"></Column>
                        <Column field="id" header="id"></Column>
                    </DataTable>
                </div>
                {filtered?.length != 0 && <button type="submit" >Select</button> }
            </form>
        </div>
    )

The component to be rendered:

const MainPanel = (data) => {
  const { name } = data

  return (
    <div>
        <div>MainPanel</div>
        <h3>{name}</h3>
    </div>
  )
}

Thanks in advance.