Cannot read property ‘suppressHydrationWarning’ of null

I’m a react beginner, currently learning NextJS.

I’ve created a simple component in CreateSubject.js:

import React from 'react';

export default function CreateSubject(props) {
  return (
    <div>
      <div className="field">
        <label className="label">Name</label>
        <div className="control">
          <input
            ref="input"
            className="input"
            type="text"
          />
        </div>
      </div>
      <div className="field is-grouped is-grouped-right">
        <p className="control">
          <a
            className="button is-primary"
            onClick={props.onClick}
          >
            Validate
          </a>
        </p>
        <p className="control">
          <a className="button is-light">
            Cancel
          </a>
        </p>
      </div>
    </div>
  )
};

This code is NOT working, I got the following error:

Uncaught TypeError: Cannot read property 'suppressHydrationWarning' of null

If I change this function into a Component:

import React from 'react';

export default class CreateSubject extends React.Component {
  render() {
    return (
      <div>
        <div className="field">
...

it’s working well. What is wrong with the first code?

For more information, I’m using NextJS, and CreateSubject is called like that:

import React from 'react';
import Navbar from './Navbar';
import Modal from './Modal';
import CreateSubject from './forms/CreateSubject';


let displayShowModal = false;
const createSubject = () => {
  alert('okkkk')
};
export default () => (
  <div>
    <Modal display={displayShowModal} title="Creating subject">
      <CreateSubject onClick={createSubject}/>
    </Modal>
    <Navbar/>
  </div>
);

Solution

The issue was due to the input field having a ref attribute. Removing the ref attribute that wasn’t that useful anyway fixed the issue.