React, focus() triggers submit - reactjs

Question

I have Routes:
export const Routes = (props) => {
return(
//----------
<Switch>
<Route exact path='/:id' render={props => <AdvFormEditContainer/>}/>
<Route path='/' render={props => <Main/>}/>
</Switch>
//----------
)
}
And there is <AdvFormContainer/> inside of <Main/>:
export class AdvFormContainer extends React.Component {
constructor(props) {
super(props);
this.submitForm = this.submitForm.bind(this);
this.onChange = this.onChange.bind(this);
this.state = {
titleError: '',
textError: ''
}
}
componentDidMount() { // Comment it out and no titleError message
this.focusForm.focus();
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
})
}
submitForm(e) {
e.preventDefault();
const {title, text} = this.state;
const {logged, addAdv} = this.props;
const author = logged[0].name;
if (title && text) {
addAdv(author, title, text);
setTimeout(() => {
this.setState({
title: '',
text: ''
})
}, 2000);
this.resetForm.reset();
} else if (!title) { // Get fired because there is no title yet!
this.setState({
titleError: 'Please, enter title!'
});
setTimeout(() => {
this.setState({
titleError: ''
})
}, 2000);
} else if (!text) {
this.setState({
textError: 'Please, enter the text!'
});
setTimeout(() => {
this.setState({
textError: ''
})
}, 2000);
}
}
render() {
return (
<div>
<AdvForm
{...this.props}
onChange={this.onChange}
submitForm={this.submitForm}
resetRef={el => this.resetForm = el}
focusRef={el => this.focusForm = el}
titleError={titleError}
textError={textError}
/>
</div>
)
}
}
And <AdvForm> component:
export const AdvForm = (props) => {
const {......., resetRef, focusRef} = props;
return (<form action="post"
ref={resetRef}
>
<MuiThemeProvider>
<TextField
ref={focusRef}
//---------------------
/>
</MuiThemeProvider>
//----------------------
</form>)}
Everything works fine if <Main/> and <AdvFormContainer/> mounted the first time.
But if there is a Route change from path="/:id" to path="/", <AdvForm/> inside of
<AdvFormContainer/> get submitted with empty inputs, which triggers Error message.
Such behavior occurs because of
componentDidMount() { // Comment it out and no titleError message
this.focusForm.focus();
}
If there is no focus(), there is no empty submitting.
<Button/> has nothing to do with it. I tried to get out onSubmit from <Button/> and attach it to <form>. The same behavior.
Please, out of curiosity, what's going on?