How to test hidden Text which has a toggle function by using testing-react-library?

I have a problem that I cannot test text which wrapped a function in toggle.

As i look at it, fireEvent.click function is well done. So, "When the party starts" text has been rendered. I checked screen.debug().

But, hiddenMessage value is null. So I have failed to test "expect(hiddenMessage......."

test('just console.log', () => {
  const { getByText, queryByText } = render(<Guide />);

  const titleOfGuide = getByText(/the party/);    >>>> visible text

  const hiddenMessage = queryByText(/^When the party starts/).  >> When toggle is on, visible text
  fireEvent.click(titleOfGuide)
  screen.debug();  >>>> the result I want to render. Hidden text is visible !

  console.log(hiddenMessage);>>>> hiddenMessage is a null. Why is null?..
  // expect(hiddenMessage).toBeTruthy();
}). 

below the code to test

const Guide = () => {

    const [toggle, setActiveToggle] = useState([false, false,false, false, false]);
    
    const activeToggle = useCallback((menu) => () => {
        setActiveToggle((prevState) => {
        const newState = [...prevState];
        newState[menu] = !newState[menu];
        return newState;
      });
    }, [toggle]);

    return (

        // ... The toggle contol function in here. (activeToggle)

        <ListColumn>
              <div>
                  the party
              </div>
              {toggle[0] && (
                <div>
                    When the party starts
                </div>
              )}
        </ListColumn>

        // ... Other ListColumn component ...

    )
}