React passing Drag Events Up; this.props.onDragStart not a function - reactjs

Question

I am building a chess game using React and have a piece component which is draggable. When I handle drag events within the component itself I have no problems. However, when I try to pass drag events up to the parent component for handling, I get the error: TypeError: _this6.props.onDragStart is not a function.
The strangest part is that it seems to work until the error is thrown. I click the piece to move and and I get alerted with "starttt" which means that the function in the parent component was called successfully but then I get the error above implying that the function that was just called could not be found. I am very confused by this.
Here is my code for the parent component and draggable component.
class Square extends React.Component {
drag_start(event) {
alert('startttt')
}
renderSquare(color){
var class_name = "dark square"
var url = null;
if (this.props.value) {
url = this.props.value.url;
}
if (color) {
class_name = "light square"
}
if (url){
return <div className={class_name} onClick={() =>
this.props.onClick()} onDragStart = {(event) => this.drag_start(event)}
>
<ReactPiece url = {url}/> </div>
}
else {
return <div className={class_name} onClick={() =>
this.props.onClick()} > </div>
}
}
render() {
var color = this.props.color
return (
<React.Fragment>
{this.renderSquare(color)}
</React.Fragment>
);
}
}
class ReactPiece extends React.Component {
dragEnd = (event) => {
alert('end')
}
drop = (event) => {
alert('drop')
}
render() {
var url = this.props.url
return <img src={url} width="43" height="43" alt ='' draggable="true"
onDragStart={(event) => this.props.onDragStart(event)} onDrop=
{this.drop}
onDragOver={(event) => event.preventDefault()} onDragEnd={this.dragEnd} />;
}
}

Answer 1

You are not passing anything into the onDragStart props of ReactPeice