Ref.Current не определен

Question

TLDR - мне нужна помощь, чтобы понять, как изменить цвет подкомпонента с помощью ссылок.

Я пытаюсь научить себя немного больше о ссылках React, выполнив простой пример: сравнение фонаизменение цвета в подкомпонентах как с опорами, так и с ссылками. Я понимаю, что это не лучшая практика в дикой природе, однако, для примера с игрушкой, это казалось хорошим изолированным упражнением.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import SubComponent1 from './SubComponent1'
import SubComponent2 from './SubComponent2'

class App extends React.Component {

  render() {
    let myRef = React.createRef();

    return (
        <div className="App">
          <header className="App-header">
            <SubComponent1
                  message = "Passing via props"
                  color = "orange"
              />
              <SubComponent2
                  message = "Passing via ref" 
                  ref={myRef}
              />
              {console.log("hi")}
              {console.log(myRef)}
            {console.log(myRef.current)}
            {/*{myRef.current.style = { backgroundColor: 'green' }}*/}
          </header>
        </div>
    );
  }
}

export default App;

Я хотел бы иметь возможность вызвать myRef.current.style = {backgroundColor: 'green'} (или что-то в этом роде) в моем файле App.js, однако, похоже, что myRef.current имеет значение null, когда я пытаюсь вызвать его.

Когда я консольный журнал, я получаю {current: null}, но после расширения данные компонента есть. Я читал, что это может быть потому, что myRef.current стирается после compomentDidMount, но я не совсем уверен, куда идти дальше.

Если бы я хотел завершить этот пример, какой для меня был бы лучший способ сделать это? В идеале, я думаю, я хотел бы иметь возможность позвонить на линию, которую я закомментировал, или что-то вроде этого.

Код - https://github.com/ericadohring/ReactRef