Can't mount react component in react template with flowrouter

Question

I.m trying to change react component with meteor flow router, the route is correctly created but I can't change the component, the console log is displayed correctly but the component is not changed. In the browser console, I get the following error.

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

My route file

FlowRouter.route('/administrador', {
name: 'administrador',
action() {
    mount(AdministradorLayout, {
        content: <AdministradorPage />
    })
    console.log("hola")
}
})

My AdminnistradorLayout

import React from 'react'

export default function AdministradorLayout({ content }) {

return (
    <div>{content}</div>
)
}

My Administrador Page (A snippet only)

export default function AdministradorPage() {
const classes = useStyles();
const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false,
});

const toggleDrawer = (anchor, open) => (event) => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
        return;
    }

    setState({ ...state, [anchor]: open });
};

Answer 1

Found out that removing the brackets while importing the components in the routes file solved the problem