React.JS - I am trying to import functions from .js file into .jsx file, but it still doesn't work. Cannot read property 'click' of null'

I am new to React and already set up my app. So far I am trying to create a header, which contains a menu, and carries over the whole website. I successfully did that after a lot of research. Now I am trying to do a more sophisticated menu - with hovering, etc. The only thing I can't do at the moment is that I can't make the classes active when they are clicked - I have the code, but I don't know how to integrate it properly.

I already looked through StackOverflow over how to import functions and tried it as well, but to no avail. Here is all of my code and the error:

Header.jsx

import React, { Component } from 'react';
import './Header.css';
import './Header.js';
import {openPage} from './Header.js';
 //import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 
'react-bootstrap';


class Header extends Component {
    render() {
  return (
    <div>
    <button class="tablink" onclick={openPage('Home', this, 'red')}>Home</button>
    <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
    <button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
    <button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

      <div id="Home" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="News" class="tabcontent">
        <h3>News</h3>
        <p>Some news this fine day!</p> 
      </div>

      <div id="Contact" class="tabcontent">
        <h3>Contact</h3>
        <p>Get in touch, or swing by for a cup of coffee.</p>
      </div>

      <div id="About" class="tabcontent">
        <h3>About</h3>
        <p>Who we are and what we do.</p>
      </div>
      </div>
          );
          }
        }

      export default Header;

OpenPage is the function I have imported, but doesn't work properly. It gives me the error 'Cannot read property 'click' of null'' for > 23 | document.getElementById("defaultOpen").click();

Here is the .js file:

    function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
}

// Show the specific tab content
document.getElementById(pageName).style.display = "block";

// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

I would appreciate any tips or help! I have been stuck on this for a long time and really want to make my menu work. I am new to React and Javascript, so excuse me if I made a stupid mistake! Thanks in advance!