how to call a function of another component in react js

Question

I have a NavMenu component class like this:

import React, { Component } from "react";
import { Navbar, NavItem, NavLink, OffcanvasBody } from "reactstrap";
import "./styles/NavMenu.css";
import Offcanvas from "react-bootstrap/Offcanvas";

export class NavMenu extends Component {
  static displayName = NavMenu.name;
  constructor(props) {
    super(props);
    this.state = {
      showOffcanvas: false,
    };
    this.setShowOffcanvas = this.setShowOffcanvas.bind(this);
    this.setHideOffcanvas = this.setHideOffcanvas.bind(this);
  }

  setShowOffcanvas() {
    this.setState({ showOffcanvas: true });
  }

  setHideOffcanvas() {
    this.setState({ showOffcanvas: false });
  }
  render() {
    return (
      <>
        <Navbar className="sticky-top">
          <ul className="left-navbar">
            <NavItem>
              <NavLink onClick={this.setShowOffcanvas} className="original">
                Open Offcanvas
              </NavLink>
            </NavItem>
          </ul>
        </Navbar>
        <Offcanvas
          className="offcanvasPlayer"
          show={this.state.showOffcanvas}
          onHide={this.setHideOffcanvas}
        >
          <NavLink
            className="text-white card-link close-btn"
            data-bs-dismiss="offcanvas"
            onClick={this.setHideOffcanvas}
          ></NavLink>
          <OffcanvasBody>{/* offcanvas body here */}</OffcanvasBody>
        </Offcanvas>
      </>
    );
  }
}

then my navbar button to open offcanvas in another component like this :

import React, { Component } from "react";
import { NavLink } from "reactstrap";
import "./styles/TopNavbar.css";

export class TopNavbar extends Component {
  static displayName = TopNavbar.name;
  constructor(props) {
    super(props);
    this.state = {
      showOffcanvas: false,
      showPlayer: false,
    };
    this.setShowOffcanvas = this.setShowOffcanvas.bind(this);
    this.setHideOffcanvas = this.setHideOffcanvas.bind(this);
  }

  setShowOffcanvas() {
    this.setState({ showOffcanvas: true });
  }

  setHideOffcanvas() {
    this.setState({ showOffcanvas: false });
  }

  render() {
    return (
      <>
        <NavLink className="item" onClick={this.setShowOffcanvas}>Opening Offcanvas NavMenu component</NavLink>
      </>
    );
  }
}

but when i'm clicking on the (this.setShowOffcanvas), project show this error:

Uncaught TypeError: Cannot read properties of null (reading 'hide')
    at HTMLAnchorElement.<anonymous> (offcanvas.js:254:1)
    at HTMLDocument.handler (event-handler.js:118:1)

I swear to God, whatever I did didn't work