Центральный компонент в реакции

Здравствуйте, у меня есть следующий компонент заголовка:

import React from 'react';
import './style.css';
import SearchBar from './SearchBar';
import logo from '../../assets/logo.png';

export default function Header() {
  return (
    <>
      <div className = "header-top"></div>
      <div className = "header">
        <img className = "header__logo" src = {logo} />
        <SearchBar />
      </div>
    </>
  );
}

И компонент панели поиска, который импортируется в заголовок:

import React from 'react';

export default function SearchBar() {
  return (
    <div className = "search-form-container">
      <form className = "search-form">
        <input
          type = "text"
          className = "search-form__input"
          placeholder = "Zoeken naar merken of producten..."
        ></input>
      </form>
    </div>
  );
}

и css:

.header-top {
  width: 100%;
  height: 30px;
  background: black;
  color: white;
  font-weight: bold;
}

.header {
  width: 100%;
  background: white;
  height: 60px;
  box-shadow: 0px 11px 13px -9px rgba(141, 141, 141, 0.75);
  display: flex;
  align-items: center;
}

.header__logo {
  height: 20px;
  padding-right: 100px;
  object-fit: contain;
}

.search-form__input {
  width: 700px;
  height: 45px;
  border: none;
  background: #f6f6f6;
  padding-left: 20px;
  color: black;
  border-radius: 5px;
}

Полученный результат таков:

я хочу, чтобы центрировать панель поиска внутри заголовка. Но только панель поиска. я бы хотел, чтобы логотип оставался отдельным с правой стороны. Когда я добавляю justify-content:center, он центрирует все, включая логотип.

Как мне добиться этого результата? заранее спасибо