I am trying to call child component method , I tried various solution from internet but nothing worked. Here is the stackblitz link

Here is the code snippet

Parent.component

import React, { Component } from 'react';
import Child from './child';

const Form = (props) => {
  return (
    <div>
      <Child
        ref={(instance) => {
          this.child = instance;
        }}
      />
      <button
        onClick={() => {
          props.callparent(this.child);
        }}
      >
        Click
      </button>
    </div>
  );
};

class Parent extends Component {
  parentfunc = (childref) => {
    //invoking child method
    childref.getAlert();
  };
  render() {
    return (
      <div>
        <Form
          callparent={() => {
            this.parentfunc();
          }}
        />
      </div>
    );
  }
}

export default Parent;

child.js

import React, { Component } from 'react';

class Child extends Component {
  getAlert() {
    alert('clicked');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

export default Child;

When I try to invoke child method childref.getAlert(); I see Uncaught TypeError: Cannot set properties of undefined (setting 'child').

I am sure I am not creating the child reference correctly and passing it to the function to invoke child method. Can someone please help me here!