keep your "button" instance and change it's props instead of creating new button when props change, this way you keep keyboard navigation available

Button.jsx

import React from 'react';

// Don't do this
const Button = ({ isChecked }) => (
  <div>
    {isChecked && <button className="btn btn--checked">I'm checked</button>}
    {!isChecked && <button className="btn btn--unchecked">I'm not checked</button>}
  </div>
);
    
// Do this instead
const Button = ({ isChecked }) => (
  <div>
    <button className={`btn ${isChecked ? "btn--checked" : "btn--unchecked"}`}>
      {isChecked ? "I'm checked" : "I'm not checked"}
    </button>
  </div>
);