React - toggle class when input is onFocus

Question

import React, { useState } from 'react';
import { css } from '@emotion/react';

const ColTest = () => {
  const [isInputFocused, setIsInputFocused] = useState(false);

  const containerStyles = css`
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    overflow: hidden;
  `;

  const buttonStyles = css`
    width: ${isInputFocused ? '10%' : '20%'};
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.5s;
  `;

  const inputStyles = css`
    width: ${isInputFocused ? '90%' : '100%'};
    transition: width 0.5s;
  `;

  return (
    <div css={containerStyles}>
      <button css={buttonStyles}>{isInputFocused ? '+' : '+ New Topic'}</button>
      <input
        type="text"
        css={inputStyles}
        placeholder="Enter your topic..."
        onFocus={() => setIsInputFocused(true)}
        onBlur={() => setIsInputFocused(false)}
      />
    </div>
  );
};

export default ColTest;