How to use pseudo classes when button clicked show title text

I would like that the user enters their name in input, then when button to save is clicked the button disappears and the user name appears. (Using createstyles I'm aware I could write a function)

I want to use pseudo classes and am currently using mantine as a design framework. I thought I could nest the title class inside of the button css to that when button is active title is no longer visible. It seems in mantine that you cannot style two classes at once like in css:

.button .title {
}

Currently if you hold the mouse down the button stays hidden while click is held but then reappears, I would like it to stay gone. Although this doesn't effect the visibility of the title class.

import React, { useContext } from 'react';
import { Container, Title, TextInput, Button, Group, Header, createStyles } from '@mantine/core';
import { useStateWithLocalStorage } from './UseStateWithLocalStorage';
import { WeatherContext } from './WeatherComponent';
import { MdWbSunny } from 'react-icons/md';
import { BsFillCloudSnowFill } from 'react-icons/bs';
import { IoIosPartlySunny } from 'react-icons/io';

const useStyles = createStyles((theme) => ({
  title: {
    visibility: 'hidden',
  },

      button: {
    color: theme.white,
    backgroundColor: theme.colors.blue[6],
    border: 0,
    borderRadius: theme.radius.md,
    padding: `${theme.spacing.sm}px ${theme.spacing.lg}px`,
    cursor: 'pointer',
    margin: theme.spacing.md,

    
    '&:active': {
      display: 'none',
      title: {
        visibility: 'visible',
      },
    },
  },
}));
 
  

const UserForm = () => {
  const [inputValue, setInputValue] = useStateWithLocalStorage('', 'form');
  const { classes } = useStyles();
  // const [show, setShow] = useState(true);
  const weatherIcon = useContext(WeatherContext);
  function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    setInputValue(() => ({
      [event.target.name]: event.target.value,
    }));
  }

  return (
    <Header height={56} mb={20}>
      <Container
        style={{
          display: 'flex',
          flexDirection: 'row',
          backgroundColor: 'gray',
          justifyContent: 'space-between',
          color: 'white',
          alignItems: 'center',
          padding: '10px',
          fontSize: '25px',
          fontWeight: 'bold',
          boxShadow: '0 3px 6px 0 #555',
        }}
      >
        <Group>
          <Title order={2}>Welcome </Title>

          <TextInput
            className="title"
            type="text"
            name="name"
            id="name"
            placeholder="enter your name"
            onChange={handleChange}
            value={inputValue.name}
          />

          <Button className={classes.button}>SAVE</Button>

          <Title className={classes.title} order={2}>
            {inputValue.name ? inputValue.name : ''}
          </Title>
        </Group>

        <Group style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <Title order={2}>
            {weatherIcon === 'Sunny' ? (
              <MdWbSunny data-testid="sunny" />
            ) : weatherIcon === 'Snowing' ? (
              <BsFillCloudSnowFill data-testid="snowing" />
            ) : (
              <IoIosPartlySunny data-testid="overcast" />
            )}
          </Title>
        </Group>
      </Container>
    </Header>
  );
};
export default UserForm;

I guess I would like to know if what I'm trying to do is even possible.