当子级改变状态时做出反应，父级重置状态

Question

我在下面的摘要中有一个组件

import { FC, useState, useEffect, createContext, useContext } from 'react';
import { Button } from '@swvl/button';

type option = {
  name: string;
  icon?: JSX.Element;
};

type SwitchContentContextType = {
  options: option[];
  setOptions: (option: option[]) => void;
};

type SwitchContentCompoundTypes = {
  Content: FC<option>;
};

const SwitchContentContext = createContext({} as SwitchContentContextType);

export const SwitchContent: FC & SwitchContentCompoundTypes = ({ children }) => {
  const [options, setOptions] = useState<option[]>([]);

  useEffect(() => {
    console.log('options', options);
  }, [options]);

  return (
    <SwitchContentContext.Provider value={{ options, setOptions }}>
      <div
        sx={{
          backgroundColor: 'secondary-light-90',
          display: 'inline-flex',
          borderRadius: '20px',
          border: '1px solid transparent',
        }}
      >
        {options.map((option, index) => {
          return (
            <Button
              key={index}
              sx={{
                backgroundColor: 'secondary-light-90',
                borderRadius: 'inherit',
                color: 'content-quarternary',
                '&:hover, &:active': {
                  bg: 'secondary',
                  borderRadius: '20px',
                  color: 'primary-light-100',
                },
                '& span': { variant: 'text.p-small' },
              }}
            >
              {option.name}
            </Button>
          );
        })}
      </div>
      {children}
    </SwitchContentContext.Provider>
  );
};

const Content: SwitchContentCompoundTypes['Content'] = ({ children, name, icon, ...rest }) => {
  const { options, setOptions } = useContext(SwitchContentContext);

  useEffect(() => {
    const optionsCopy = [...options];
    optionsCopy.push({ name, icon });
    setOptions(optionsCopy);
  }, []);

  return <div {...rest}>{children}</div>;
};

SwitchContent.Content = Content;

时，尝试推动新选项的顶部选项状态应具有2个成员，但它只有最后一个成员。看来可以更改重新渲染父母的选项，并重新定义状态的原因，但是我所知道的是重新渲染不会重置

状态组件

<SwitchContent>
  <SwitchContent.Content name="Regular mode">
    <p>Content 1</p>
  </SwitchContent.Content>
  <SwitchContent.Content name="B2B mode">
    <p>Content 2</p>
  </SwitchContent.Content>
</SwitchContent>

我试图委托在父组件中登录使用效率的选项值，如下所示，

useEffect(() => {
  console.log('options', options);
}, [options]);

并在结果以下