【TypeScript】useContextを使用した値の受け渡し

こんにちは。TypeScript初心者です。

Index.tsxファイルのtitleの値をArticleProvider.tsxファイル内のarticleDataに
渡したいのですがうまくいきません。。

Type '{}' is not assignable to type 'string'.
というエラーに悩まされています。
このエラーが発生する理由や解決方法がわかる方教えてください。お願いします！

Index.tsx

  const { articleData, setArticleData } = useContext(ArticleContext);
  const [title, setTitle] = useState({});

  function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
    event.preventDefault();
    setTitle({ title: event.target.value });
    console.log(event.target.value);
  }

  const handleSubmit = useCallback(() => {

 // ↓ここでType '{}' is not assignable to type 'string'.が出ます。
    setArticleData({ title: title });

    console.log(`${JSON.stringify(articleData)}`);
    console.log(`${articleData}`);
    createArticle();
    onClose();
  }, []);

ArticleProvider.tsx

import React, {
  createContext,
  Dispatch,
  SetStateAction,
  useState,
  ReactNode,
} from 'react';
import { Article } from '../types/api/article';

type ArticleContextType = {
  articleData: Article | null;
  setArticleData: Dispatch<SetStateAction<Article | null>>;
};

export const ArticleContext = createContext<ArticleContextType>(
  {} as ArticleContextType
);

export const ArticleProvider = (props: { children: ReactNode }) => {
  const { children } = props;
  const [articleData, setArticleData] = useState<Article | null>({});
  return (
    <ArticleContext.Provider value={{ articleData, setArticleData }}>
      {children}
    </ArticleContext.Provider>
  );
};

resources\ts\types\api\article.ts

export type Article = {
  id: number;
  title?: string;
  content: string;
  picture1?: string;
  picture2?: string;
  picture3?: string;
  picture4?: string;
  picture5?: string;
  pin_flg?: number;
  delete_flg?: number;
  created_at?: string;
  updated_at?: string;
};