Need to store React Functional component in react useState hook

I want to store React component in react useState but i think it is technically is wrong.
What you think about that.

Example

 
const components = {
 filter: <Filter />,
 search: <Search />
}

const App = () => {
 const [activeComponent, setActiveComponent] = useState(components.filter);

 return (
   <div>
     {activeComponent}
<button onClick={() => setActiveComponent(components.search)}>Change Active component</button>
   </div>
 )
}

I want to know which problem can be when storing react component in useState hook