if-else is not working in scss with react

I am working on this project of React with styling file .scss. And I want to implement this toggle and navbar that if I click it should change to open or vice-versa, but I am not getting whether the problem is with react or the if-else condition.

This is my react code:

import React, { useState } from 'react';
const Burger = () => {
const [open, setOpen] = useState(false)

return (
    <>
        <div className={styles['burger']} open={open} onClick={() => setOpen(!open)}>
            <div />
            <div />
            <div />
        </div>
        <RightNav open={open} />
    </>
)
}

And this is my .scss code:

 &:nth-child(1) {
  $type: open;
  @if $type == open {
    transform: rotate(45deg);
  } @else{
      transform: rotate(0);
  }
}
&:nth-child(2) {
  $type: open;
  @if $type == open {
    transform: translateX(100%);
    opacity: 0;
  } @else{
      transform: translateX(0);
      opacity: 1;
  }
}
&:nth-child(3) {
  $type: open;
  @if $type == open {
    transform: rotate(-45deg);
  } @else{
      transform: rotate(0);
  }
}

What does my code do? It runs and the navbar remains open and this code is for making the hamburger button and cross button. So, this is only staying in a cross button and on clicking the navbar stays open.