React Child Component Causing Parent Re-Render on Ajax Call - ruby-on-rails

Question

I am using React with React Router on top of Rails to handle the front end of an app that is supposed to return info about whatever gem the user searches for, however, once I hit submit, the child component, who manages it's own state, causes a re-render for the parent component.
EXPECTED RESULT: SavedGems.jsx re-renders
ACTUAL RESULT: Search.jsx re-renders
Here is my code:
StaticPage.jsx
export default class StaticPage extends React.Component {
render() {
return (
<BrowserRouter>
<div style={{display: 'flex', flexDirection: 'row'}}>
<Route exact path='/' render={() => <Search />}/>
<Route path='/favorites' render={() => <Favorites/>} />
</div>
</BrowserRouter>
);
}
}
Search.jsx
export default class Search extends React.Component {
render() {
return (
<div style = {{display: 'flex', flexDirection: 'row'}}>
<Sidebar/>
<div style = {{display: 'flex', flexDirection: 'column'}}>
<Header name = "Search Gems"/>
<Form/>
<SavedGems/>
</div>
</div>
)
}
}
SavedGems.jsx
export default class SavedGems extends React.Component {
constructor() {
super();
this.state = {saved_gems : []};
console.log(this.saved_gems);
}
componentDidMount() {
$.getJSON('/api/v1/saved_gems.json', (response) => { this.setState({ saved_gems: response }) });
}
render() {
var saved_gems= this.state.saved_gems.map((saved_gem) => {
return (
<div key={saved_gem.id}>
<h3>{saved_gem.name}</h3>
<h3>{saved_gem.info}</h3>
<h3>{saved_gem.dependencies}</h3>
</div>
)
});
return (
<div>
{saved_gems}
</div>
)
}
}
_form.jsx
export default class Form extends React.Component {
constructor() {
super();
this._handleClick = this._handleClick.bind(this);
this.state = {formBorderColor : "#5F5F5F"};
}
render() {
return (
<div>
<form>
<label>
<input ref='name'
type="text"
placeholder='Search'
style= {{fontFamily: 'Lato-Regular',
fontSize: 18,
height:89,
width: 780,
paddingLeft: 20,
backgroundColor: 'white',
border: '1px solid',
borderColor: this.state.formBorderColor,
borderRadius: 100}}/>
</label>
<input type="image" src='/assets/magnifying-glass.png'
style={{marginLeft: -70}}
onClick={this._handleClick}/>
</form>
</div>
)
}
_handleClick(event) {
const name = this.refs.name.value;
const info = '';
const dependencies = '';
$.ajax({
url: '/api/v1/saved_gems',
type: 'POST',
data: { saved_gem: { name, info, dependencies } },
success: (saved_gem) => {
this.props.handleSubmit(saved_gem);
this.refs.name.value = '';
this.refs.info.value = '';
this.refs.dependencies.value = '';
},
error: (xhr) => {
this.setState = ({formBorderColor : 'red'}).bind(this);
alert("Sorry! That is not a valid gem");
}
})
}
}