about typing react18 context object in typescript

ColorProvider.tsx

import React, { createContext, useState, FC } from "react";
import uuidv4 from "uuidv4";
import { getInitialColorDataList } from "./ColorDataList";

export type ColorDataTyp = {
  id: string;
  title: string;
  color: string;
  rating: number;
};
const initialColorDataList = getInitialColorDataList()

export type ColorContextTyp = { 
  colors: ColorDataTyp[]; 
  addColor: (a:string,b:string)=>void, 
  rateColor: (a:string,b:number)=>void
  removeColor: (a:string)=>void
}

// See also
//   - https://zenn.dev/nfunato/articles/typing-ccontext-arg (in Japanese)
//   - https://github.com/nfunato/lr_6_4_4/blob/main/src/components/ColorProvider.tsx

// ERROR
// src/components/ColorProvider.tsx
//   Line 31:31:  React Hook "useState" is called in function "makeColorContextSeed" 
//   that is neither a React function component nor a custom React Hook function. 
//   React component names must start with an uppercase letter. React Hook names 
//   must start with the word "use"  react-hooks/rules-of-hooks
function makeColorContextSeed () : ColorContextTyp { 
  const [colors, setColors] = useState<ColorDataTyp[]>(initialColorDataList);

  const addColor = (title: string, color: string): void => {
    setColors([...colors, { id: uuidv4(), rating: 0, title, color }]);
  };

  const rateColor = (id: string, rating: number): void => {
    setColors(
      colors.map((color: ColorDataTyp) =>
        color.id === id ? { ...color, rating } : color
      )
    );
  };

  const removeColor = (id: string): void => {
    setColors(colors.filter((color: ColorDataTyp) => color.id !== id));
  };

  return { colors, addColor, rateColor, removeColor }
}

const colorContextSeed = makeColorContextSeed();
export const ColorContext = createContext(colorContextSeed);

type Props = {
  children: React.ReactNode;
};

export const ColorProvider : FC<Props> = (props: Props) => {
  return (
    <ColorContext.Provider value={ colorContextSeed }>
      {props.children}
    </ColorContext.Provider>
  );
}

ColorProvider2.tsx

import React, { createContext, useState, FC } from "react";
import uuidv4 from "uuidv4";
import { getInitialColorDataList } from "./ColorDataList";

export type ColorDataTyp = {
  id: string;
  title: string;
  color: string;
  rating: number;
};
const initialColorDataList = getInitialColorDataList()

export type ColorContextTyp = { 
  colors: ColorDataTyp[]; 
  addColor: (a:string,b:string)=>void, 
  rateColor: (a:string,b:number)=>void
  removeColor: (a:string)=>void
}

// See also
//   - https://zenn.dev/nfunato/articles/typing-ccontext-arg (in Japanese)
//   - https://github.com/nfunato/lr_6_4_4/blob/main/src/components/ColorProvider.tsx

// これだとエラーは出ないが画面真っ白になる
const MakeColorContextSeed = () => { 
  const [colors, setColors] = useState<ColorDataTyp[]>(initialColorDataList);

  const addColor = (title: string, color: string): void => {
    setColors([...colors, { id: uuidv4(), rating: 0, title, color }]);
  };

  const rateColor = (id: string, rating: number): void => {
    setColors(
      colors.map((color: ColorDataTyp) =>
        color.id === id ? { ...color, rating } : color
      )
    );
  }

  const removeColor = (id: string): void => {
    setColors(colors.filter((color: ColorDataTyp) => color.id !== id));
  };

  return { colors, addColor, rateColor, removeColor }
}

const colorContextSeed = MakeColorContextSeed();
export const ColorContext = createContext(colorContextSeed);

type Props = {
  children: React.ReactNode;
};

export const ColorProvider : FC<Props> = (props: Props) => {
  return (
    <ColorContext.Provider value={ colorContextSeed }>
      {props.children}
    </ColorContext.Provider>
  );
}